在现代JavaScript开发中，异步编程已经成为不可或缺的部分。随着ES2017引入的async/await语法，我们终于能够以近乎同步的方式编写异步代码，大大提升了代码的可读性和可维护性。

一、async/await基础入门

async和await是构建在Promise之上的语法糖，它们让异步代码看起来和行为更像同步代码。

1. async函数

在函数声明前加上async关键字，这个函数就变成了async函数：

javascript async function fetchData() { // 函数体 }

async函数有几个重要特性：
- 总是返回一个Promise
- 如果返回值不是Promise，会自动包装成Promise
- 可以在函数体内使用await表达式

2. await表达式

await只能在async函数内部使用，它会暂停async函数的执行，等待Promise解决：

javascript async function getUser() { const response = await fetch('/api/user'); const user = await response.json(); return user; }

在实际开发中，await最常见的用法是等待网络请求、文件读写、数据库操作等I/O密集型任务完成。

二、async/await的工作原理

理解async/await背后的机制对于编写健壮的异步代码非常重要。

1. 执行流程：当调用async函数时，它会立即返回一个Promise。函数体开始执行，直到遇到第一个await表达式时暂停。

2. 微任务队列：await后面的表达式会被求值，然后async函数暂停并释放主线程。当Promise解决后，函数恢复执行，剩余的代码被放入微任务队列。

3. 错误传播：如果await的Promise被拒绝，拒绝值会被抛出，可以通过try-catch捕获。

三、错误处理策略

正确处理async/await中的错误是保证应用健壮性的关键。以下是几种常见的错误处理方式：

1. try-catch块

最直接的方式是用传统的try-catch结构包裹await表达式：

javascript async function loadData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } catch (error) { console.error('加载数据失败:', error); // 可以在这里进行错误恢复或上报 } }

2. 在Promise链中捕获

async函数返回的是Promise，因此可以在调用处使用catch方法：

javascript
async function riskyOperation() {
const result = await dangerousAction();
return process(result);
}

riskyOperation()
.then(finalResult => console.log(finalResult))
.catch(err => console.error('操作失败:', err));

3. 错误处理包装函数

对于大型项目，可以创建高阶函数统一处理错误：

javascript
function withErrorHandling(fn) {
return async (...args) => {
try {
return await fn(...args);
} catch (error) {
console.error('Error in', fn.name, error);
// 可以添加统一的错误上报逻辑
throw error; // 或者返回默认值
}
};
}

const safeFetchUser = withErrorHandling(async (userId) => {
const response = await fetch(/users/${userId});
return response.json();
});

四、常见陷阱与最佳实践

1. 避免不必要的await

不要滥用await，特别是对于不需要等待的操作：

javascript
// 不好的写法
const a = await getA();
const b = await getB(); // 等待getA完成才开始getB

// 好的写法 - 并行执行
const [a, b] = await Promise.all([getA(), getB()]);

2. 不要在forEach中使用await

forEach的回调函数不会等待async函数完成：

javascript
// 这不会按预期工作
items.forEach(async (item) => {
await processItem(item);
});

// 应该使用for...of
for (const item of items) {
await processItem(item);
}

3. 处理多个并行请求

使用Promise.all处理多个并行请求：

javascript async function fetchMultiple() { try { const [users, products] = await Promise.all([ fetch('/users'), fetch('/products') ]); // 处理结果 } catch (error) { // 任何一个请求失败都会进入这里 } }

五、高级技巧

1. 错误重试机制

实现带重试的异步操作：

javascript
async function retry(fn, retries = 3, delay = 1000) {
try {
return await fn();
} catch (error) {
if (retries <= 0) throw error;
await new Promise(resolve => setTimeout(resolve, delay));
return retry(fn, retries - 1, delay * 2); // 指数退避
}
}

const result = await retry(() => fetch('/unstable-api'));

2. 超时处理

为异步操作添加超时：

javascript
function withTimeout(promise, timeout) {
return Promise.race([
promise,
new Promise((_, reject) =>
setTimeout(() => reject(new Error('Timeout')), timeout)
)
]);
}

try {
const data = await withTimeout(fetch('/slow-api'), 5000);
} catch (error) {
if (error.message === 'Timeout') {
console.log('请求超时');
} else {
console.log('其他错误', error);
}
}

六、async/await与Promise的互操作性

async/await与传统的Promise可以无缝协作：

javascript
// async函数中使用Promise
async function example() {
return new Promise((resolve) => {
setTimeout(() => resolve('Done!'), 1000);
});
}

// Promise链中调用async函数
function legacyCode() {
example()
.then(result => console.log(result))
.catch(error => console.error(error));
}

七、浏览器与Node.js中的差异

1. 顶级await：在ES模块中可以直接使用顶级await，但在CommonJS模块中不行
2. 错误堆栈：Node.js中的异步错误堆栈通常更完整
3. 未处理拒绝：Node.js有unhandledRejection事件，而浏览器环境处理方式不同

结语

async/await极大地简化了JavaScript异步编程，但要想真正用好它，需要深入理解Promise机制和错误处理策略。记住，好的异步代码不仅仅是能工作，还应该具备良好的错误恢复能力和可维护性。

在实际项目中，建议结合项目规模选择合适的错误处理策略，小型项目可以简单使用try-catch，而大型应用则可能需要更系统化的错误处理中间件。无论哪种方式，清晰的错误处理和日志记录都是保障应用稳定性的重要手段。