async/await是基于promise的语法糖，它简化了异步代码的编写，使其更易读和维护。1. async函数始终返回一个promise，函数内部的返回值会被promise.resolve()包装，而抛出的错误则会触发promise的reject；2. await用于等待promise resolve，暂停async函数的执行，但不会阻塞事件循环，而是将后续代码放入微任务队列中等待执行；3. promise的回调被放入微任务队列，优先于宏任务执行，因此await后的代码会在当前宏任务结束后立即继续执行；4. 使用try/catch可捕获await中的错误，使错误处理更加直观；5. 使用promise.all或promise.allsettled可以并发处理多个异步任务，并在所有任务完成后统一处理结果；6. await在循环中使用时，需根据是否需要串行或并行执行选择for...of或promise.all。async/await并未改变事件循环机制，只是提供了更清晰的异步编程方式。
async/await本质上是基于Promise的语法糖，它并没有改变JavaScript事件循环的运行方式。理解其工作原理的关键在于理解Promise如何与事件循环交互，以及async/await如何简化Promise的使用。
async/await简化了异步代码的编写，让异步代码看起来更像同步代码，但其底层仍然是基于Promise的非阻塞操作。
async/await的背后机制
async函数到底做了什么？
async函数会隐式地返回一个Promise。如果函数体内部直接返回一个值，这个值会被Promise.resolve()包装成一个fulfilled状态的Promise。如果函数内部抛出错误，那么async函数返回的Promise会被reject。例如：
async function myAsyncFunction() {
return 'Hello';
}
myAsyncFunction().then(value => console.log(value)); // 输出 "Hello"
async function myAsyncFunctionWithError() {
throw new Error('Something went wrong');
}
myAsyncFunctionWithError().catch(error => console.error(error)); // 输出 Error: Something went wrong这表明async函数的核心在于它总是返回一个Promise，无论函数体内的逻辑如何。
await关键字的魔法
await关键字用于等待一个Promise对象resolve。当JavaScript引擎遇到await时，它会暂停async函数的执行，直到await后面的Promise对象resolve。重要的是，await并不会阻塞整个事件循环。相反，它会将async函数剩余部分的执行“解耦”出来，放入事件循环的微任务队列（microtask queue）中。一旦await后面的Promise resolve，事件循环会从微任务队列中取出这个任务，继续执行async函数剩余的部分。
举个例子：
async function example() {
console.log('Start');
const result = await new Promise(resolve => setTimeout(() => resolve('Done'), 1000));
console.log(result);
console.log('End');
}
example();
console.log('Outside async function');这段代码的执行顺序是：
StartOutside async function- 等待1秒
DoneEnd
这里，await暂停了example函数的执行，但并没有阻塞console.log('Outside async function')的执行。1秒后，Promise resolve，Done和End才会被打印。
微任务队列（Microtask Queue）的重要性
Promise的resolve/reject回调函数会被放入微任务队列中，而不是宏任务队列（macrotask queue）。微任务队列的优先级高于宏任务队列。这意味着，在每个宏任务（例如setTimeout回调，用户交互等）执行完毕后，JavaScript引擎会先清空微任务队列，然后再去执行下一个宏任务。
我愿意把本文归入我的“编程糗事”系列。尽管在正规大学课程中，接触到软件工程、企业级软件架构和数据库设计，但我还是时不时地体会到下述事实带给我的“罪恶”感，当然，都是我的主观感受，并且面向Eclipse： 你是PHP菜鸟，如果你： 1. 不会利用如phpDoc这样的工具来恰当地注释你的代码 2. 对优秀的集成开发环境如Zend Studio或Eclipse PDT视而不见 3
这解释了为什么在上面的例子中，即使setTimeout设置了1秒的延迟，Done和End仍然会在Outside async function之后立即执行，而不是等待下一个宏任务的开始。
错误处理：try/catch与async/await
在async函数中，可以使用try/catch块来捕获await表达式可能抛出的错误。这使得错误处理更加直观和方便。
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
}如果fetch或response.json()抛出错误，catch块会捕获这个错误，并进行相应的处理。
为什么async/await比直接使用Promise更清晰？
async/await通过将异步代码转换为看似同步的代码，极大地提高了代码的可读性和可维护性。它避免了Promise链式调用中可能出现的“回调地狱”，使得代码逻辑更加清晰。
如何处理多个并发的异步操作？
可以使用Promise.all或Promise.allSettled来并发执行多个异步操作，并在所有操作完成后进行处理。
async function processData() {
const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
console.log('Data 1:', data1);
console.log('Data 2:', data2);
}Promise.all会并行执行fetchData1和fetchData2，并在它们都resolve后，将结果分别赋值给data1和data2。如果其中任何一个Promise reject，Promise.all会立即reject。
async/await会阻塞事件循环吗？
不会。await关键字会暂停async函数的执行，但不会阻塞事件循环。事件循环仍然可以处理其他任务，例如用户交互和定时器回调。只有当await后面的Promise resolve时，async函数才会继续执行。
如何在循环中使用async/await？
在循环中使用async/await时，需要小心处理并发问题。如果需要在循环中串行执行异步操作，可以使用for...of循环。如果可以并行执行异步操作，可以使用Promise.all。
async function processItems(items) {
for (const item of items) {
const result = await processItem(item);
console.log('Processed:', result);
}
}
async function processItemsInParallel(items) {
const results = await Promise.all(items.map(item => processItem(item)));
console.log('Processed:', results);
}processItems会串行地处理每个item，而processItemsInParallel会并行地处理所有item。选择哪种方式取决于具体的业务需求。
