await 返回了什么

庚辰腊七木头鱼

已于 2023-01-23 11:13:21 修改

阅读量6.9k

点赞数 5

文章标签： javascript 前端 vue.js

于 2023-01-23 11:07:07 首次发布

本文链接：https://blog.csdn.net/weixin_46235143/article/details/128751893

版权

文章详细阐述了async函数和await关键字的基本使用规则，指出await必须等待Promise对象的状态变为resolve才会继续执行后续代码。当await后的Promise保持pending状态时，后续代码不会执行；而当Promise被resolve后，async函数会继续并返回结果。

摘要由CSDN通过智能技术生成

一、前言

可以理解 await 后面的语句相当于放到了 new Promise 中，下一行及之后的语句相当于放在 Promise.then 中

二、async 和 await 的基础使用

async/awiat 的使用规则:

async 返回的是一个 Promise 成功的对象，await 就是等待这个 promise 的返回结果后，再继续执行
await 等待的是一个 Promise 对象，后面必须跟一个 Promise 对象，但是不必写 then ()，直接就可以得到返回值

但注意，await 所等待的 promise 对象，他的最终状态一定是 resolve 的（当然也可以不是 resolve ，只不过不会执行后面的代码罢了），否则不会执行await 后面的代码，也就是不会去执行所谓的 then() ;

await后面的promise状态不是resolve的输出结果

async function async1 () {
  console.log('async1 start');
  await new Promise(resolve => {
    console.log('promise1');
  })
  console.log('async1 success');
  return 'async1 end'
}
console.log('srcipt start')
async1().then(res => console.log(res))
console.log('srcipt end')

/* await后面的promise状态不是resolve的输出结果
"srcipt start"
"async1 start"
"promise1"
"srcipt end"
*/

这里我们可以看到：在 async1 中 await 后面的 Promise 是没有返回值的，也就是它的状态始终是 pending 状态，所以在 await 之后的内容是不会执行的，包括 async1 后面的 .then。

await后面的promise状态是resolve的输出结果

async function async1 () {
  console.log('async1 start');
  await new Promise(resolve => {
    console.log('promise1');
    resolve()
  })
  console.log('async1 success');
  return 'async1 end'
}
console.log('srcipt start')
async1().then(res => console.log(res))
console.log('srcipt end')

/*await后面的promise状态是resolve的输出结果
"srcipt start"
"async1 start"
"promise1"
"srcipt end"
"async1 success"
"async1 end"
*/