LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

js中async和await 的详细讲解

zhenglin
2025年12月2日 10:34 本文热度 313
async 函数永远会返回一个promise,即使你在函数中没有返回任何值。

async 函数永远会返回一个promise,即使你在函数中没有返回任何值。
因为:返回没有返回值时函数默认返回的是 undefined.
所以:会返回一个 promise,这个 promise 的 值为 undefined。

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

async function doThingFn(){

  console.log('doThingFn')

}

等于与下面的


async function doThingFn(){

  // 返回没有返回值时函数默认返回的是 undefined.

  return Promise.resolve(undefined)

}

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

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

代码高亮:

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

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

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的值


async function timeOutFn(){

  setTimeout(()=>{

    Promise.resolve('B')

  },5000)

}

async function doThingFn(){

  console.log('A')

  // 如何让这里正确获取到B的值

  const result2 = await timeOutFn()

  console.log(result2)

}

doThingFn()

这样就可以获取到值

代码高亮:

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 的语法规则


1, async 是 function 的一个前缀,只有 async 函数中才能使用 await 语法  

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

3, await 后面跟的是一个 Promise 对象,如果不是,则会包裹一层 Promise.resolve()  

await和async的主要作用

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


参考文章:原文链接


该文章在 2025/12/2 10:34:56 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2025 ClickSun All Rights Reserved