async await详解_async await会阻塞吗

2401_85192755

于 2024-05-25 01:17:50 发布

阅读量479

点赞数 4

分类专栏：作者\/ 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2401_85192755/article/details/139187515

版权

作者\/ 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

🍬本文目录

🥙一、简介
🥪二、async
🌮三、await
🍔四、案例
🥪附：直接量/字面量

🥙一、简介

async/await是ES20717引入的，主要是简化Promise调用操作，实现了以异步操作像同步的方式去执行，async外部是异步执行的，同步是await的作用。

🥪二、async

async，英文意思是异步，当函数（包括函数语句、函数表达式、Lambda表达式）前有async关键字的时候，并且该函数有返回值，函数执行成功，那么该函数就会调用Promise.resove()并隐式的返回一个Promise对象；如果函数执行失败就会调用Promise.reject()并返回一个Promise对象。

Promise.resolve(x) 可以看作是 new Promise(resolve => resolve(x)) ，可将字面量对象或其他对象快速封装成 Promise 实例

async函数中如果有异步操作会进行等待，但是async函数本身会马上返回，不会阻塞当前线程。async函数被调用不会阻塞界面渲染，内部由await关键字修饰异步过程，会阻塞等待异步任务的完成再返回。
如果在函数中return一个直接量，async会把这个直接量通过Promise.resolve(直接量) 封装成 Promise 对象 ，如果没有返回值，相当于返回了Promise.resolve(undefined)。
通过Promise回调得到async函数的返回值 ，通过Promise回调得到async函数的返回值，因为该函数返回的是Promise对象

async func(){
     return "a"
}

console.log(func())
func().then(res=>{
   console.log(res) //通过回掉获取到 a
 }.catch(err=>{ }))

func()的返回值如下，由此可见返回的是一个Promise对象。
Promise {: 'a'}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "a"

🌮三、await

使用await时，一定要配合async使用 ，这样才能使异步代码同步化，await英文为等待，意思就是等待await后面的函数（该函数返回的是Promise对象）执行完之后，在之后后面的代码。
await后面也可以跟同步代码 ，这样做的话意义不大，增加了系统处理逻辑，系统会自动将其转化成一个Promsie对象。比如：

const a = await '1';
const a = await Promise.resolve('1');//跟上面效果效果相同
//await后跟同步代码，不如不使用await,增加了代码逻辑，没有意义
const a = '1';

await在等返回值，后面可以是字面量或者函数表达式。如果表达式的运算结果不是Promise对象，那么该结果就是await等的值； 如果await后是一个Promise对象，那么就会阻塞后面代码的运行 。但是async函数的调用并不会阻塞，它内部所有的阻塞都封装在Promise对象中异步执行。
await只处理resolve(data)时的数据，不处理reject(error) ，当异步函数体内出错的时候，怎么捕获到错误信息呢?

可以让await后的函数通过catch获取
通过最外面的func函数的catch获取
func函数体内使用try…catch…，然后从catch获取， try…catch可获取 async 函数内，任意 await 的错误，其中一个被拒绝，便会暂停，返回错误信息。

async function func(){
   const a = await asyncFunc();
}
asyncFunc().then().catch()

async function func(){
   const a = await asyncFunc();
}
func().then().catch()

async function func(){
   try(){
       const a = await asyncFunc();
   }catch(error){ }
}

🍔四、案例

async function func(){
   console.log('a')
   const c = await 'c'
   console.log(c)
   return 'd'
}


# 总结

其他的内容都可以按照路线图里面整理出来的知识点逐一去熟悉，学习，消化，不建议你去看书学习，最好是多看一些视频，把不懂地方反复看，学习了一节视频内容第二天一定要去复习，并总结成思维导图，形成树状知识网络结构，方便日后复习。

这里还有一份很不错的《Java基础核心总结笔记》，特意跟大家分享出来

**目录：**

![](https://img-blog.csdnimg.cn/img_convert/af81fa382b50247d402f691e07ab12ff.webp?x-oss-process=image/format,png)

**部分内容截图：**

![](https://img-blog.csdnimg.cn/img_convert/fcc56ae22c8a6eb4d5ee28443d937c5e.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/078f35cb3f829d1260d2cd873bff3db7.webp?x-oss-process=image/format,png)
链图片转存中...(img-SyqrUuq0-1716571058439)]

**部分内容截图：**

[外链图片转存中...(img-GBTmms37-1716571058439)]

[外链图片转存中...(img-iv4b8zzS-1716571058439)]