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关键字即可。

<div id="app">
    <div v-for="person in people">{{person.name}} - {{person.age}}</div>
</div>

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关键字就可以了。

<div id="app">
    <button @click="secondPerson">点我!</button>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        people: null,
    },
    methods: {
        async secondPerson() {
            const res = await fetch('https://raw.githubusercontent.com/DaKoala/fetch-example/master/people.json');
            const json = await res.json();
            const person = json[1];
            alert(`我是${person.name}，我今年${person.age}岁。`);
        }
    },
});

我们仍然使用同一个JSON文件，这里我们异步读取这个JSON文件，并在获取到之后弹出一个提示框，点击后效果：

源代码

本文中的例子的源代码我已经上传到了GitHub，可以点击这里查看或下载源代码，或者点击这里查看运行效果。