深入理解async/await：优雅的异步编程

### 引言

async/await 是 Javascript 中非常强大的异步编程工具，可以极大地简化异步代码的编写。通过 async 和 await 关键字，我们可以写出更加直观和易读的异步代码。本文将详细介绍 async 和 await 的用法及其背后的原理。

### async 的作用

async 关键字用于声明一个函数是异步的，该函数会返回一个 Promise 对象。可以在 async 函数内部使用 then 方法添加回调函数。async 函数内部的 return 语句返回的值会成为 then 方法回调函数的参数。

async function test() { return 'test'; }
console.log(test); // [AsyncFunction: test] async 函数是 [AsyncFunction] 构造函数的实例
console.log(test()); // Promise { 'test' } // async 返回的是一个 Promise 对象
test().then(res => { console.log(res); // test });
// 如果 async 函数没有返回值，async 函数返回一个 undefined 的 Promise 对象
async function fn() { console.log('没有返回'); }
console.log(fn()); // Promise { undefined }
// 可以看到 async 函数返回值和 Promise.resolve() 一样，将返回值包装成 Promise 对象，如果没有返回值就返回 undefined 的 Promise 对象

### await 的用法

await 操作符只能在异步函数 async function 内部使用。如果一个 Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果，也就是说它会阻塞后面的代码，等待 Promise 对象结果。如果等待的不是 Promise 对象，则返回该值本身。

async function test() { return new Promise((resolve) => { setTimeout(() => { resolve('test 1000'); }, 1000); }); }
function fn() { return 'fn'; }
async function next() { let res0 = await fn(), res1 = await test(), res2 = await fn(); console.log(res0); console.log(res1); console.log(res2); }
next(); // 1s 后才打印出结果，因为 res1 在等待 Promise 的结果，阻塞了后面代码。

### 错误处理

如果 await 后面的异步操作出错，那么等同于 async 函数返回的 Promise 对象被 reject。

async function test() { await Promise.reject('错误了'); }
test().then(res => { console.log('success', res); }, err => { console.log('err ', err); }) // err 错误了
// 防止出错的方法是将其放在 try...catch 代码块之中
async function test() { try { await new Promise(function (resolve, reject) { throw new Error('错误了'); }); } catch (e) { console.log('err', e); } return await('成功了'); }

### 并行执行多个 await

多个 await 命令后面的异步操作，如果不存在继发关系（即互不依赖），最好让它们同时触发。

let foo = await getFoo();
let bar = await getBar();
// 上面这样写法 getFoo 完成以后，才会执行 getBar
// 同时触发写法 ↓
// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

### async/await 的优点

async/await 的优势在于处理由多个 Promise 组成的 then 链。在之前的 Promise 文章中提到，用 then 处理回调地狱的问题，async/await 相当于对 Promise 的进一步优化。假设一个业务，分多个步骤，且每个步骤都是异步的，而且依赖上个步骤的执行结果。

// 假设表单提交前要通过两个校验接口
async function check(ms) { // 模仿异步 return new Promise((resolve) => { setTimeout(() => { resolve(`check ${ms}`); }, ms); }); }
function check1() { console.log('check1'); return check(1000); }
function check2() { console.log('check2'); return check(2000); }
// -------------promise------------
function submit() { console.log('submit'); // 经过两个校验，多级关联，promise 传值嵌套较深 check1().then(res1 => { check2(res1).then(res2 => { /* 提交请求 */ }) }) }
submit();
// -------------async/await-----------
async function asyncAwaitSubmit() { let res1 = await check1(), res2 = await check2(res1); console.log(res1, res2); /* 提交请求 */ }

### 原理

async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里。

async function fn(args) { // ... }
// 等同于
function fn(args) { return spawn(function* () { // ... }); }

### Generator 函数的用法

Generator 函数就是一个封装的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都用 yield 语句注明。调用 Generator 函数，返回的是指针对象（这是它和普通函数的不同之处）。调用指针对象的 next 方法，会移动内部指针。next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法，会返回一个对象，表示当前阶段的信息（value 属性和 done 属性）。value 属性是 yield 语句后面表达式的值，表示当前阶段的值；done 属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有下一个阶段。

function* Generator() { yield '1'; yield Promise.resolve(2); return 'ending'; }
var gen = Generator(); // 返回指针对象 Object [Generator] {}
let res1 = gen.next();
console.log(res1); // 返回当前阶段的值 { value: '1', done: false }
let res2 = gen.next();
console.log(res2); // 返回当前阶段的值 { value: Promise { 2 }, done: false }
res2.value.then(res => { console.log(res); // 2 });
let res3 = gen.next();
console.log(res3); // { value: 'ending', done: true }
let res4 = gen.next();
console.log(res4); // { value: undefined, done: true }

### 使用 Generator 实现 async 函数

// 接受一个 Generator 函数作为参数
function spawn(genF) { // 返回一个函数 return function() { // 生成指针对象 const gen = genF.apply(this, arguments); // 返回一个 Promise return new Promise((resolve, reject) => { // key 有 next 和 throw 两种取值，分别对应了 gen 的 next 和 throw 方法 // arg 参数则是用来把 Promise resolve 出来的值交给下一个 yield function step(key, arg) { let result; // 监控到错误 就把 Promise 给 reject 掉 外部通过 .catch 可以获取到错误 try { result = gen[key](arg); } catch (error) { return reject(error); } // gen.next() 返回 { value, done } 的结构 const { value, done } = result; if (done) { // 如果已经完成了 就直接 resolve 这个 Promise return resolve(value); } else { // 除了最后结束的时候外，每次调用 gen.next() return Promise.resolve( // 这个 value 对应的是 yield 后面的 Promise value ).then((val) => step('next', val), (err) => step('throw', err)); } } step('next'); }); }}

### 测试

function fn(nums) { return new Promise(resolve => { setTimeout(() => { resolve(nums); }, 1000); }); }
// async 函数
async function testAsync() { let res1 = await fn(1); console.log(res1); // 1 let res2 = await fn(2); console.log(res2); // 2 return res2; }
let _res = testAsync();
console.log('testAsync-res', _res); // Promise
_res.then(v => console.log('testAsync-res', v)); // 2
// Generator 函数
function* gen() { let res1 = yield fn(3); console.log(res1); // 3 let res2 = yield fn(4); console.log(res2); // 4 // let res3 = yield Promise.reject(5); // console.log(res3); return res2; }
let _res2 = spawn(gen)();
console.log('gen-res', _res2); // Promise
_res2.then(v => console.log('gen-res', v)) // 4
.catch(err => { console.log(err); }); // res3 执行会抛出异常

### 结语

如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163，相互学习，我们会有专业的技术答疑解惑。

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点 star: https://gitee.com/ZhongBangKeJi/CRMEB 不胜感激！