JavaScript async/await 使用详解：从原理到错误处理

一、简介

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

二、async

async 意为异步。当在函数（包括函数声明、函数表达式或 Lambda 表达式）前添加 async 关键字，且该函数有返回值时，若函数执行成功，它会调用 Promise.resolve() 并隐式返回一个 Promise 对象；若执行失败，则调用 Promise.reject() 并返回一个 Promise 对象。

Promise.resolve(x) 可视为 new Promise(resolve => resolve(x)) 的简写形式，用于将字面量对象或其他对象快速封装为 Promise 实例。

• async 函数内部若包含异步操作，会等待其完成，但 async 函数本身会立即返回，不会阻塞当前线程。调用 async 函数不会阻塞界面渲染，其内部的阻塞逻辑由 await 关键字修饰，确保异步任务完成后才继续执行后续代码。
• 若在 async 函数中 return 一个直接量，async 会将其通过 Promise.resolve(直接量) 封装为 Promise 对象；若没有显式返回值，则相当于返回 Promise.resolve(undefined)。
• 通过 Promise 的回调函数可以获取 async 函数的返回值，因为 async 函数返回的始终是 Promise 对象。

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

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

三、await

使用 await 时必须配合 async 关键字，这样才能使异步代码同步化。await 意为等待，即等待 await 后面的函数（该函数返回 Promise 对象）执行完毕后，再执行后续代码。

await 后面也可以跟同步代码，但这通常没有实际意义，反而增加了系统处理逻辑，系统会自动将其转化为一个 Promise 对象。例如：

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)。当异步函数体内出错时，如何捕获错误信息呢？

1. 可以让 await 后的函数通过 .catch 方法获取错误。
2. 通过最外层的 func 函数的 .catch 方法获取。
3. 在 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'
}
func().then(res=>console.log(res))
console.log('b')

输出：

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

附-直接量/字面量

文中提到了字面量，这里做简要介绍。

字面量又称直接量，是代码中固定值的表示方法，指程序中直接使用且未进行封装的数据。可分为字符串字面量（string literal）、数组字面量（array literal）、对象字面量（object literal）以及函数字面量（function literal）。通常除函数表达式外，在变量赋值时，可理解为等号右边的数据部分。

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

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

var d =function func(){} 

到此这篇关于 JavaScript async/await 使用详解的文章就介绍到这了，更多相关 JS async/await 内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！