vue中使用async函数
在Vue中使用async函数async/await语法在生命周期钩子上使用async函数在methods中使用async函数源代码async/await语法在ES7标准中新增了async和await关键字,作为处理异步请求的一种解决方案,实际上是一个语法糖,在ES6中已经可以用生成器语法完成同样的操作,但是async/await的出现使得用这样的方式处理异步请求更加简单和明白。下面...
在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关键字即可。
<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关键字就可以了。
我们仍然使用同一个JSON文件,这里我们异步读取这个JSON文件,并在获取到之后弹出一个提示框,点击后效果:
源代码
本文中的例子的源代码我已经上传到了GitHub,可以点击这里查看或下载源代码,或者点击这里查看运行效果
————————————————
版权声明:本文为CSDN博主「考拉比利」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/zyj362633491/article/details/86663493
更多推荐
所有评论(0)