写点什么

async/await 详解

作者:不叫猫先生
  • 2023-05-06
    北京
  • 本文字数:1689 字

    阅读完需:约 6 分钟

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 实例


  1. ==<font color=red >async 函数中如果有异步操作会进行等待,但是 async 函数本身会马上返回,不会阻塞当前线程</font>==。async 函数被调用不会阻塞界面渲染,内部由 await 关键字修饰异步过程,会阻塞等待异步任务的完成再返回。

  2. ==<font color=red >如果在函数中 return 一个直接量,async 会把这个直接量通过 Promise.resolve(直接量) 封装成 Promise 对象</font>== ,如果没有返回值,相当于返回了 Promise.resolve(undefined)。

  3. ==<font color=red >通过 Promise 回调得到 async 函数的返回值</font>== ,通过 Promise 回调得到 async 函数的返回值,因为该函数返回的是 Promise 对象


async func(){     return "a"}
console.log(func())func().then(res=>{ console.log(res) //通过回掉获取到 a }.catch(err=>{ }))
复制代码


func()的返回值如下,由此可见返回的是一个 Promise 对象。


🌮三、await

  1. ==<font color=red >使用 await 时,一定要配合 async 使用</font>== ,这样才能使异步代码同步化,await 英文为等待,意思就是等待 await 后面的函数(该函数返回的是 Promise 对象)执行完之后,在之后后面的代码。

  2. ==<font color=red >await 后面也可以跟同步代码</font>== ,这样做的话意义不大,增加了系统处理逻辑,系统会自动将其转化成一个 Promsie 对象。比如:


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


  1. await 在等返回值,后面可以是字面量或者函数表达式。如果表达式的运算结果不是 Promise 对象,那么该结果就是 await 等的值; ==<font color=red >如果 await 后是一个 Promise 对象,那么就会阻塞后面代码的运行</font>== 。但是 async 函数的调用并不会阻塞,它内部所有的阻塞都封装在 Promise 对象中异步执行。

  2. ==<font color=red >await 只处理 resolve(data)时的数据,不处理 reject(error)</font>== ,当异步函数体内出错的时候,怎么捕获到错误信息呢?


  • 可以让 await 后的函数通过 catch 获取

  • 通过最外面的 func 函数的 catch 获取

  • func 函数体内使用 try...catch..,然后从 catch 获取, ==<font color=red >try..catch 可获取 async 函数内,任意 await 的错误,其中一个被拒绝,便会暂停,返回错误信息</font>==。


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'}func().then(res=>console.log(res))console.log('b')
复制代码


输出:



先输出 a 后输出 b,说明 async 函数执行后会立即返回,不阻塞线程。

🥪附:直接量/字面量

文中提到了字面量,博文在这里做下介绍。字面量又称之为直接量,代码中固定值的表示方法,程序中直接使用的数据,没进行过封装。可分为字符串字面量(string literal)、数组字面量(array literal)、对象字面量(object literal),函数字面量(function literal)。 ==<font color=red >一般除去函数表达式,在给变量赋值时,可以理解为=号右边的数据</font>== 。


var a = "1";var b = [1];var c = {};var d =function (){} // function() 为匿名函数
复制代码


注意:函数字面量一般为匿名函数,但是语法也支持定义函数名。


var d =function func(){} 
复制代码


发布于: 刚刚阅读数: 1
用户头像

还未添加个人签名 2022-10-18 加入

还未添加个人简介

评论

发布
暂无评论
async/await详解_JavaScript_不叫猫先生_InfoQ写作社区