vue中用 async/await 来处理异步操作
33 浏览量
2020-10-15
03:11:05
上传
评论
收藏 111KB PDF 举报
vue中用中用 async/await 来处理异步操作来处理异步操作
主要介绍了vue中用 async/await 来处理异步操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编
过来看看吧
昨天看了一篇vue的教程，作者用async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标
准化，也是需要学习一下了。
先说一下async的用法，它作为一个关键字放到函数前面，
async function timeout() {
return 'hello world';
}
只有一个作用, 它的调用会返回一个promise 对象。调用一下看看就知道了，怎么调用？async 函数也是函数，所以它的调用
和普通函数的调用没有什么区别，直接加括号调用就可以了，为了看结果，console.log 一下
async function timeout() {
return 'hello world'
}
console.log(timeout());
看一下控制台
async函数(timeout)的调用，确实返回promise 对象，并且Promise 还有status和value，如果async 函数中有返回值 ,当调用该
函数时，内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回, 但如果timeout 函数内部抛出错误呢？
async function timeout() {
throw new Error('rejected');
}
console.log(timeout());
就会调用Promise.reject() 返回一个promise 对象，
那么要想获取到async 函数的执行结果，就要调用promise的then 或catch 来给它注册回调函数，
async function timeout() {
return 'hello world'
}
timeout().then(result => {
console.log(result);
})
如果async 函数执行完，返回的promise 没有注册回调函数，比如函数内部做了一次for 循环，你会发现函数的调用，就是执
行了函数体，和普通函数没有区别，唯一的区别就是函数执行完会返回一个promise 对象。
async function timeout() {
for (let index = 0; index < 3; index++) {
console.log('async '+ index);
}
}
console.log(timeout());
console.log('outer')
async 关键字差不多了，最重要的就是async函数的执行会返回一个promise 对象，并且把内部的值进行promise的封装。如果
promise对象通过then或catch方法又注册了回调函数，async函数执行完以后，注册的回调函数就会放到异步队列中，等待执
行。如果只是async, 和promise 差不多，但有了await就不一样了， await 关键字只能放到async 函数里面，await是等待的意
思，那么它等待什么呢，它后面跟着什么呢？其实它后面可以放任何表达式，不过我们更多的是放一个返回promise 对象的表
达式，它等待的是promise 对象的执行完毕，并返回结果
现在写一个函数，让它返回promise 对象，该函数的作用是2s 之后让数值乘以2
评论0
最新资源