【每日一面】async/await 的原理

基础问答

问：async/await 的原理是什么？

答：关键字本身就是 Promise 的语法糖，依托于生成器函数 （Generator） 函数能力实现的。async 关键字标志这个函数为异步函数，并且将返回结果封装为一个 Promise，await 则是暂停当前执行，等待后续的异步操作完成后再恢复，相当于 Generator 的 yield 。只是在 Generator 中，需要手动调用 next() 触发执行， async 函数则内置该操作，自动根据 await 的异步结果执行后续函数步骤。

扩展延伸

在上面，提到了一个生成器函数（Generator），这个是 JavaScript 中的一种特殊函数，可以暂停和恢复函数执行。在平时的开发中，基本很少见到这个函数的使用，不过面试的时候，只要聊到了 async/await 内容，90% 以上的概率会问到生成器函数。

生成器函数使用 function* 语法定义，他会返回一个生成器对象，而不是和普通函数一样返回指定的结果，如下示例：

// 定义一个Generator函数，包含2个暂停点（yield）和1个返回值（return）
function* syncGenerator() {console.log('1. 函数开始执行');yield '第一个暂停结果'; // 第一个暂停点，返回值为'第一个暂停结果'console.log('2. 函数恢复执行');yield '第二个暂停结果'; // 第二个暂停点，返回值为'第二个暂停结果'console.log('3. 函数即将结束');return '最终返回结果'; // 函数执行完毕，返回最终结果
}// 1. 调用Generator函数，返回迭代器（此时函数体未执行）
const genIterator = syncGenerator();
console.log('调用Generator后，函数未执行：', genIterator); // 输出：Generator {<suspended>}// 2. 第一次调用next()：执行到第一个yield，暂停
const result1 = genIterator.next();
console.log('第一次next()结果：', result1); 
// 输出顺序：
// 1. 函数开始执行
// 第一次next()结果：{ value: '第一个暂停结果', done: false }（done=false表示未执行完毕）// 3. 第二次调用next()：从第一个yield恢复，执行到第二个yield，暂停
const result2 = genIterator.next();
console.log('第二次next()结果：', result2);
// 输出顺序：
// 2. 函数恢复执行
// 第二次next()结果：{ value: '第二个暂停结果', done: false }// 4. 第三次调用next()：从第二个yield恢复，执行到return，结束
const result3 = genIterator.next();
console.log('第三次next()结果：', result3);
// 输出顺序：
// 3. 函数即将结束
// 第三次next()结果：{ value: '最终返回结果', done: true }（done=true表示执行完毕）// 5. 第四次调用next()：函数已结束，后续调用均返回{ value: undefined, done: true }
const result4 = genIterator.next();
console.log('第四次next()结果：', result4); // 输出：{ value: undefined, done: true }

核心执行规则：

1. 首次调用 Generator 函数：仅返回迭代器，函数体不执行；
2. 每次调用 next ()：函数从上次暂停位置继续执行，直到遇到下一个yield或return；
3. 返回结果结构：next()返回的对象包含value（yield后的值或return的值）和done（布尔值，标识是否执行完毕）；
4. 执行完毕后：后续调用next()，done始终为true，value为undefined。

面试之外，你应该知道，Generator 函数的核心价值在于“异步流程控制”，即，通过yield暂停执行异步操作，等待异步结果返回后， 调用 next() 恢复执行。这就是 async/await 的底层逻辑雏形。

// 模拟接口请求（异步函数，返回Promise）
function fetchUser() {return new Promise((resolve) => {setTimeout(() => {resolve({ id: 1, name: '前端面试' });}, 1000);});
}function fetchOrders(userId) {return new Promise((resolve) => {setTimeout(() => {resolve([{ orderId: '1001', goods: '面试指南' }]);}, 1000);});
}// 定义异步Generator函数：用yield暂停异步操作
function* asyncGenerator() {console.log('开始请求用户信息');const user = yield fetchUser(); // 暂停，等待fetchUser的Promise完成console.log('用户信息请求完成：', user);console.log('开始请求订单信息');const orders = yield fetchOrders(user.id); // 暂停，等待fetchOrders的Promise完成console.log('订单信息请求完成：', orders);return { user, orders }; // 最终返回结果
}// 手动执行异步Generator函数（模拟async/await的自动执行器）
function runGenerator(genFn) {const genIterator = genFn(); // 获取迭代器// 定义递归执行函数function handleNext(result) {// 若Generator执行完毕，直接返回最终结果if (result.done) {return Promise.resolve(result.value);}// 若未执行完毕，处理yield返回的Promise（异步操作）// result.value是yield后的值（此处为fetchUser/fetchOrders返回的Promise）return Promise.resolve(result.value).then((res) => {// 异步操作完成后，调用next(res)恢复执行，将异步结果作为yield的返回值return handleNext(genIterator.next(res));}).catch((err) => {// 捕获异步错误，调用throw(err)将错误传入Generator函数return handleNext(genIterator.throw(err));});}// 启动第一次执行return handleNext(genIterator.next());
}// 执行异步Generator函数
runGenerator(asyncGenerator).then((finalResult) => {console.log('所有异步操作完成，最终结果：', finalResult);}).catch((err) => {console.log('异步操作出错：', err);});

async/await 本质是 Generator + 自动执行器的语法糖，二者核心逻辑可以一一对应上，只是 async/await 的封装大大简化了使用流程：

特性	Generator 函数	async/await
暂停 / 恢复标识	yield 关键字（手动标记暂停点）	await关键字（自动标记暂停点）
执行控制	需手动调用迭代器的 next() 恢复执行	内置自动执行器，无需手动控制
异步结果处理	需手动用 Promise.resolve 等待异步结果	自动等待 await 后的 Promise 完成
错误处理	需手动调用 iterator.throw(err) 传入错误	用 try/catch 自动捕获错误
返回值	调用函数返回迭代器	调用函数返回 Promise
语法简洁度	较繁琐，需手动实现执行器	简洁，无需关注执行细节

面试追问

1. 生成器函数？是怎么实现 async/await 的？
   具体代码参考扩展延伸部分内容，要代码描述。

2. async/await 基础使用方式，使用 Promise 不是更好？为什么要用 async/await 关键字。

   async function waitRequest() {const resp = await axios.request('https://hello.com')const data = resp.data;return data、
   }
   

   可以使用Promise，这个是根据使用场景来的，async/await 只是将异步调用链转换成了同步代码，阅读维护起来更方便。
   如封装一个等待延时，通常使用的就是 await + new Promise 来实现，只是多数情况下 Promise 伴随着的是比较长的调用链，带来阅读不便，此时转换成同步代码就清晰易读了。

3. 如果 await 的表达式返回了 reject，需要捕获吗？要怎么捕获？
   需要捕获，否则会触发“Uncaught (in Promise) Error”，中断代码执行，这个类似于 throw error。需要使用 try…catch 捕获 await 表达式产生的错误及reject。