async/await语法

在ES7标准中新增了asyncawait关键字,作为处理异步请求的一种解决方案,实际上是一个语法糖,在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
  }
]

最后网页显示的结果是这样的:
created效果

在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文件,并在获取到之后弹出一个提示框,点击后效果:
methods效果

源代码

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

Logo

前往低代码交流专区

更多推荐