vue中异步函数async和await的用法

async function timeout() {

return ‘hello world’;

}

语法很简单，就是在函数前面加上async 关键字，来表示它是异步的，那怎么调用呢？async 函数也是函数，平时我们怎么使用函数就怎么使用它，直接加括号调用就可以了，为了表示它没有阻塞它后面代码的执行，我们在async 函数调用之后加一句console.log。

async function timeout() {

return ‘hello world’

}

timeout();

console.log(‘虽然在后面，但是我先执行’);

打开浏览器控制台，我们看到了。

async 函数 timeout 调用了，但是没有任何输出，它不是应该返回 ‘hello world’, 先不要着急， 看一看timeout()执行返回了什么？ 把上面的 timeout() 语句改为console.log(timeout())。

async function timeout() {

return ‘hello world’

}

console.log(timeout());

console.log(‘虽然在后面，但是我先执行’);

继续看控制台。

原来async 函数返回的是一个promise 对象，如果要获取到promise 返回值，我们应该用then 方法， 继续修改代码。

async function timeout() {

return ‘hello world’

}

timeout().then(result => {

console.log(result);

})

console.log(‘虽然在后面，但是我先执行’);

我们获取到了"hello world’, 同时timeout 的执行也没有阻塞后面代码的执行，和 我们刚才说的一致。

这时，你可能注意到控制台中的Promise 有一个resolved，这是async 函数内部的实现原理。如果async 函数中有返回一个值 ,当调用该函数时，内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回，但如果timeout 函数内部抛出错误呢？ 那么就会调用Promise.reject() 返回一个promise 对象， 这时修改一下timeout 函数。

async function timeout(flag) {

if (flag) {

return ‘hello world’

} else {

throw ‘my god, failure’

}

}

console.log(timeout(true)) // 调用Promise.resolve() 返回promise 对象。

console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。

控制台如下：

如果函数内部抛出错误， promise 对象有一个catch 方法进行捕获。

timeout(false).catch(err => {

console.log(err)

})

async 关键字差不多了，我们再来考虑await 关键字，await是等待的意思，那么它等待什么呢，它后面跟着什么呢？其实它后面可以放任何表达式，不过我们更多的是放一个返回promise 对象的表达式。注意await 关键字只能放到async 函数里面

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页