js中async和await 的详细讲解

async 函数永远会返回一个promise,即使你在函数中没有返回任何值。

因为：返回没有返回值时函数默认返回的是 undefined.

所以：会返回一个 promise，这个 promise 的值为 undefined。

javascript 复制代码

async function doThingFn(){
  console.log('doThingFn')
}

// async 函数永远会返回一个promise,即使你在函数中没有返回任何值。
console.log(111, doThingFn())

// 输出的值是 undefined
// 因为async 函数会返回一个promise, 所以我们是可以写then的。
doThingFn().then(res=>{
  console.log('输出的值是',res)
})

async 函数的返回是Promise.resolve

javascript 复制代码

async function doThingFn(){
  console.log('doThingFn')
}

等于与下面的

javascript 复制代码

async function doThingFn(){
  // 返回没有返回值时函数默认返回的是 undefined.
  return Promise.resolve(undefined)
}

当 await 遇到一个被拒绝的 Promise 时，它会抛出异常。因此需要被捕获

下面依次输出的结果是：A

javascript 复制代码

async function doThingFn(){
  console.log('A')
  const result2 = await Promise.reject('B')
  console.log('C')
  return Promise.reject('D' )
}
doThingFn()

为啥只会输出:A ？

因为当 await 遇到一个被拒绝的 Promise 时，它会抛出异常。我们没有捕获，直接就会报错的。

因此下面的 C 不会输出。

为啥不会输出 C

javascript 复制代码

async function doThingFn(){
  try{
    console.log('A')
    const result2 = await Promise.reject('B')
    console.log('C')
  }catch(err){
    console.log('err',err)
  }
}
doThingFn()

分析：当 await 遇到被拒绝的 Promise 时(就是说：Promise.reject)：

立即抛出异常，中断当前代码块的执行。

（如果有catch）, 直接跳转到最近的 catch 块

await 之后的代码不会执行,因此不会输出 C。

如何让他输出C

javascript 复制代码

async function doThingFn(){
  try{
    console.log('A')
    // 我们在这里将它捕获掉。这样就可以输出C
    const result2 = await Promise.reject('B').catch(err=>{
      console.log('err',err)
    })
    console.log('C')
  }catch(err){
    console.log('err',err)
  }
}
doThingFn()

如何正确获取到B的值

javascript 复制代码

async function timeOutFn(){
  setTimeout(()=>{
    Promise.resolve('B')
  },5000)
}
async function doThingFn(){
  console.log('A')
  // 如何让这里正确获取到B的值
  const result2 = await timeOutFn()
  console.log(result2)
}
doThingFn()

这样就可以获取到值啦~~~

javascript 复制代码

async function timeOutFn(){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve('B')
    },5000)
  })
}

async function doThingFn(){
  console.log('A')
  // return new Promise(...) 是 timeOutFn 函数的返回值
  const result2 = await timeOutFn()
  console.log(result2)
}
doThingFn()

有的小伙伴会问： resolve('B') 为啥不需要return

因为： resolve 是一个回调函数，它用来改变 Promise 的状态从 "pending" 到 "fulfilled"

调用 resolve('B') 只是通知 Promise 完成，并传递值 'B' 给后续的 .then() 或 await

return new Promise(...) 是 timeOutFn 函数的返回值

resolve('B') 是设置 Promise 的解析值，不是函数的返回值

await 不能单独使用，需要配合async一起使用。

不要乱用await，因为 await 是基于 Promise 一起使用的(后面跟的是一个 Promise 对象)

async 和 await 的语法规则

javascript 复制代码

1, async 是 function 的一个前缀，只有 async 函数中才能使用 await 语法  
2, async 函数永远会返回一个promise,即使你在函数中没有返回任何值。  
3, await 后面跟的是一个 Promise 对象，如果不是，则会包裹一层 Promise.resolve()

await和async的主要作用

await和async 主要是用来优化处理回调地狱的。