vue的await用法是什么
时间：2022-02-15 16:15
在vue中，await是等待的意思，await关键字只能放在async函数里，await配合async一起使用，相当于把异步函数变成了同步，await会等待后面表达式的返回结果之后才执行下一步。 本文操作环境：windows10系统、Vue2.9.6版，DELL G3电脑。 先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数 语法很简单，就是在函数前面加上async 关键字，来表示它是异步的，那怎么调用呢？async 函数也是函数，平时我们怎么使用函数就怎么使用它，直接加括号调用就可以了，为了表示它没有阻塞它后面代码的执行，我们在async 函数调用之后加一句 打开浏览器控制台，我们看到了 async 函数 timeout 调用了，但是没有任何输出，它不是应该返回 'hello world', 先不要着急， 看一看timeout()执行返回了什么？ 把上面的 timeout() 语句改为console.log(timeout()) 继续看控制台 原来async 函数返回的是一个promise 对象，如果要获取到promise 返回值，我们应该用then 方法， 继续修改代码 看控制台 我们获取到了"hello world', 同时timeout 的执行也没有阻塞后面代码的执行，和 我们刚才说的一致。 这时，你可能注意到控制台中的Promise 有一个resolved，这是async 函数内部的实现原理。如果async 函数中有返回一个值 ,当调用该函数时，内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回，但如果timeout 函数内部抛出错误呢？ 那么就会调用Promise.reject() 返回一个promise 对象， 这时修改一下timeout 函数 控制台如下： 如果函数内部抛出错误， promise 对象有一个catch 方法进行捕获。 async 关键字差不多了，我们再来考虑await 关键字，await是等待的意思，那么它等待什么呢，它后面跟着什么呢？其实它后面可以放任何表达式，不过我们更多的是放一个返回promise 对象的表达式。注意await 关键字只能放到async 函数里面 现在写一个函数，让它返回promise 对象，该函数的作用是2s 之后让数值乘以2 现在再写一个async 函数，从而可以使用await 关键字， await 后面放置的就是返回promise对象的一个表达式，所以它后面可以写上 doubleAfter2seconds 函数的调用 打开控制台，2s 之后，输出了60. 现在我们看看代码的执行过程，调用testResult 函数，它里面遇到了await, await 表示等一下，代码就暂停到这里，不再向下执行了，它等什么呢？等后面的promise对象执行完毕，然后拿到promise resolve 的值并进行返回，返回值拿到之后，它继续向下执行。具体到 我们的代码, 遇到await 之后，代码就暂停执行了， 等待doubleAfter2seconds(30) 执行完毕doubleAfter2seconds(30) 返回的promise 开始执行，2秒 之后，promise resolve 了， 并返回了值为60， 这时await 才拿到返回值60， 然后赋值给result， 暂停结束，代码才开始继续执行，执行 console.log语句。 就这一个函数，我们可能看不出async/await 的作用，如果我们要计算3个数的值，然后把得到的值进行输出呢？ 6秒后，控制台输出220, 我们可以看到，写异步代码就像写同步代码一样了，再也没有回调地域了。 注意： async 和 await 基于 promise 的。 使用 async 的函数将会始终返回一个 promise 对象。 这一点很重要，要记住，这可能是你遇到的容易犯错的地。 在使用 await 的时候我们暂停了函数，而非整段代码。 async 和 await 是非阻塞的。 你仍然可以使用 Promise 例如 Promise.all()。 【相关推荐：《vue.js教程》】 以上就是vue的await用法是什么的详细内容，更多请关注gxlsystem.com其它相关文章！
vue的await用法是什么
async function timeout() {
return 'hello world';
}console.log;
async function timeout() {
return 'hello world'
}
timeout();
console.log('虽然在后面，但是我先执行');async function timeout() {
return 'hello world'
}
console.log(timeout());
console.log('虽然在后面，但是我先执行');
async function timeout() {
return 'hello world'
}
timeout().then(result => {
console.log(result);
})
console.log('虽然在后面，但是我先执行');
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 对象。
timeout(false).catch(err => {
console.log(err)
})// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2 * num)
}, 2000);
} )
}async function testResult() {
let result = await doubleAfter2seconds(30);
console.log(result);
}
testResult();async function testResult() {
let first = await doubleAfter2seconds(30);
let second = await doubleAfter2seconds(50);
let third = await doubleAfter2seconds(30);
console.log(first + second + third);
}
