vue中使用async函数

在Vue中使用async函数
async/await语法
在生命周期钩子上使用async函数
在methods中使用async函数
源代码
async/await语法
在ES7标准中新增了async和await关键字，作为处理异步请求的一种解决方案，实际上是一个语法糖，在ES6中已经可以用生成器语法完成同样的操作，但是async/await的出现使得用这样的方式处理异步请求更加简单和明白。

下面是MDN上使用async/await语法的一个例子：

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  var result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: 'resolved'
}

asyncCall()

你可以移步MDN文档来更详细地了解这个新的语法。

本文将介绍如何在Vue实例中使用async函数。

在生命周期钩子上使用async函数
如果要在生命周期钩子函数上使用async函数，只要在函数前加async关键字即可。

   

{{person.name}} - {{person.age}}

const vm = new Vue({
    el: '#app',
    data: {
        people: null,
    },
    async created() {
        const res = await fetch('https://raw.githubusercontent.com/DaKoala/fetch-example/master/people.json');
        this.people = await res.json();
    }
});

这里我们从GitHub上请求一个JSON文件，并将JSON的内容赋值给data中的属性people，最后通过列表渲染的方式将它显示出来。我们用的是created生命周期钩子，它会在Vue实例被创建但是还没有开始渲染到浏览器时执行。

由于created是一个对象的属性，同时它又是一个函数，所以根据ES6的对象语法，我们可以直接将对象的函数属性created写成created(){...}，它等同于created: function(){...}。

这里我们使用了JavaScript的fetch语法，如果你想了解fetch的相关内容，可以参考我的另外一篇文章：Javascript fetch 快速入门。

JSON文件的内容是这样的：

[
  {
    "name": "张三",
    "age": 18
  },
  {
    "name": "李四",
    "age": 20
  },
  {
    "name": "王五",
    "age": 22
  }
]

最后网页显示的结果是这样的：

在methods中使用async函数
如果要在methods中使用async函数，方法类似，只要在函数前加上async关键字就可以了。
我们仍然使用同一个JSON文件，这里我们异步读取这个JSON文件，并在获取到之后弹出一个提示框，点击后效果：

源代码
本文中的例子的源代码我已经上传到了GitHub，可以点击这里查看或下载源代码，或者点击这里查看运行效果
————————————————
版权声明：本文为CSDN博主「考拉比利」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zyj362633491/article/details/86663493