async/await语法糖

async/await的本质

async/await是ES2017引入的语法特性，本质上是对Promise的封装。它让异步代码看起来像同步代码，但实际执行过程仍然是异步的。async函数总是返回一个Promise对象，而await表达式会暂停async函数的执行，等待Promise解决后再继续执行。

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

async函数的基本用法

声明async函数非常简单，只需要在普通函数前加上async关键字。async函数内部可以使用await表达式，也可以不使用。即使没有await，async函数也会返回一个Promise。

// 没有await的async函数
async function sayHello() {
  return 'Hello World';
}

// 等同于
function sayHello() {
  return Promise.resolve('Hello World');
}

await的工作原理

await表达式会暂停async函数的执行，等待Promise解决。如果等待的值不是Promise，它会被转换为一个已解决的Promise。await只能在async函数内部使用，在普通函数中使用会报语法错误。

async function getUser(id) {
  // 模拟异步操作
  const user = await new Promise(resolve => {
    setTimeout(() => {
      resolve({ id, name: `User${id}` });
    }, 100);
  });
  
  console.log(user); // { id: 1, name: 'User1' }
  return user;
}

getUser(1);

错误处理机制

async/await的错误处理可以使用传统的try/catch结构，这比Promise的链式调用更直观。当await的Promise被拒绝时，会抛出异常，可以被catch捕获。

async function fetchWithRetry(url, retries = 3) {
  try {
    const response = await fetch(url);
    return await response.json();
  } catch (err) {
    if (retries <= 0) throw err;
    return fetchWithRetry(url, retries - 1);
  }
}

并行执行优化

多个await语句如果不存在依赖关系，会导致不必要的串行执行。可以使用Promise.all来优化并行执行。

// 低效的串行执行
async function getSequentialData() {
  const data1 = await fetch('/api/data1');
  const data2 = await fetch('/api/data2');
  return { data1, data2 };
}

// 高效的并行执行
async function getParallelData() {
  const [data1, data2] = await Promise.all([
    fetch('/api/data1'),
    fetch('/api/data2')
  ]);
  return { data1, data2 };
}

在循环中使用await

在循环中使用await需要特别注意执行顺序。forEach等回调式循环方法不适用于async函数，应该使用for...of循环。

// 错误的用法
async function processArray(array) {
  array.forEach(async item => {
    await processItem(item); // 不会按预期工作
  });
}

// 正确的用法
async function processArray(array) {
  for (const item of array) {
    await processItem(item); // 会按顺序执行
  }
}

async函数的限制

虽然async/await简化了异步代码，但也有一些限制需要注意。不能在全局作用域或模块顶层直接使用await，必须包装在async函数中。箭头函数也可以标记为async。

// 错误：顶层await
await someAsyncFunction(); // SyntaxError

// 正确：IIFE包装
(async () => {
  await someAsyncFunction();
})();

与其他异步模式的对比

相比回调函数和Promise链，async/await提供了更清晰的代码结构。特别是处理复杂异步逻辑时，避免了"回调地狱"和过长的Promise链。

// 回调地狱
getUser(1, (user) => {
  getPosts(user.id, (posts) => {
    getComments(posts[0].id, (comments) => {
      console.log(comments);
    });
  });
});

// Promise链
getUser(1)
  .then(user => getPosts(user.id))
  .then(posts => getComments(posts[0].id))
  .then(comments => console.log(comments))
  .catch(err => console.error(err));

// async/await
async function showComments() {
  try {
    const user = await getUser(1);
    const posts = await getPosts(user.id);
    const comments = await getComments(posts[0].id);
    console.log(comments);
  } catch (err) {
    console.error(err);
  }
}

实际应用场景

async/await特别适合需要顺序执行的异步操作，如依次读取多个文件、数据库事务处理等。在Web开发中，处理表单提交、API调用等场景也非常适用。

// 用户注册流程示例
async function registerUser(userData) {
  // 1. 验证输入
  const isValid = await validateInput(userData);
  if (!isValid) throw new Error('Invalid input');
  
  // 2. 检查用户名是否已存在
  const exists = await checkUsernameExists(userData.username);
  if (exists) throw new Error('Username already taken');
  
  // 3. 创建用户
  const user = await createUser(userData);
  
  // 4. 发送欢迎邮件
  await sendWelcomeEmail(user.email);
  
  return user;
}

性能考量

虽然async/await增加了代码可读性，但也可能带来微小的性能开销。在性能关键路径上，需要权衡可读性和性能。V8引擎对async/await有持续优化，大多数情况下开销可以忽略。

// 性能测试示例
async function performanceTest() {
  console.time('async/await');
  for (let i = 0; i < 1000; i++) {
    await someAsyncOperation();
  }
  console.timeEnd('async/await');
  
  console.time('Promise.all');
  const promises = [];
  for (let i = 0; i < 1000; i++) {
    promises.push(someAsyncOperation());
  }
  await Promise.all(promises);
  console.timeEnd('Promise.all');
}

与生成器函数的关系

async/await实际上是生成器函数和Promise的结合体。可以用生成器函数和Promise模拟async/await的行为，但语法上不如原生支持简洁。

// 用生成器模拟async/await
function* generatorExample() {
  const result1 = yield Promise.resolve(1);
  const result2 = yield Promise.resolve(2);
  return result1 + result2;
}

function runGenerator(generator) {
  const iterator = generator();
  
  function iterate(iteration) {
    if (iteration.done) return Promise.resolve(iteration.value);
    return Promise.resolve(iteration.value)
      .then(x => iterate(iterator.next(x)))
      .catch(e => iterate(iterator.throw(e)));
  }
  
  return iterate(iterator.next());
}

runGenerator(generatorExample).then(result => console.log(result)); // 3

在类方法中使用

类方法也可以声明为async，包括构造函数外的所有方法。但需要注意，构造函数不能是async函数，因为构造函数需要同步返回实例。

class ApiClient {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
  }
  
  async get(endpoint) {
    const response = await fetch(`${this.baseUrl}${endpoint}`);
    return response.json();
  }
  
  async post(endpoint, data) {
    const response = await fetch(`${this.baseUrl}${endpoint}`, {
      method: 'POST',
      body: JSON.stringify(data)
    });
    return response.json();
  }
}

常见陷阱与解决方案

使用async/await时容易陷入一些常见陷阱，如忘记await关键字、错误处理不当、不必要的串行执行等。了解这些陷阱可以帮助写出更健壮的代码。

// 陷阱1：忘记await
async function example1() {
  const promise = someAsyncFunction(); // 忘记await
  console.log(promise); // 输出Promise对象而非结果
}

// 陷阱2：未捕获异常
async function example2() {
  throw new Error('Something went wrong');
}
example2(); // Unhandled promise rejection

// 解决方案：总是处理错误
async function safeExample() {
  try {
    const result = await someAsyncFunction();
    // 处理结果
  } catch (err) {
    console.error('Error:', err);
    // 错误恢复逻辑
  }
}

在Node.js中的特殊应用

在Node.js环境中，async/await可以简化许多常见任务，如文件操作、数据库查询等。Node.js的util模块还提供了promisify工具，可以方便地将回调式API转换为Promise形式。

const fs = require('fs');
const util = require('util');
const readFile = util.promisify(fs.readFile);

async function readConfig() {
  try {
    const data = await readFile('config.json', 'utf8');
    return JSON.parse(data);
  } catch (err) {
    console.error('Failed to read config:', err);
    return {};
  }
}

与事件循环的交互

理解async/await如何与Node.js事件循环交互很重要。await不会阻塞事件循环，它只是暂停async函数的执行，允许其他操作继续进行。

async function eventLoopExample() {
  console.log('Start');
  
  setTimeout(() => console.log('Timeout'), 0);
  
  await Promise.resolve();
  console.log('After await');
  
  setImmediate(() => console.log('Immediate'));
}

eventLoopExample();
console.log('After call');
// 输出顺序可能是: Start, After call, After await, Timeout, Immediate

调试技巧

调试async函数可以使用常规的调试工具，但需要注意调用栈可能不如同步代码直观。现代调试器通常能很好地处理async/await代码。

async function debugExample() {
  debugger; // 调试器会在此暂停
  const result1 = await step1();
  // 可以检查result1的值
  const result2 = await step2(result1);
  return result2;
}

测试async函数

测试async函数与测试Promise类似，测试框架通常提供专门的支持。可以使用async/await编写测试用例，使测试代码更清晰。

// 使用Jest测试async函数
describe('async function tests', () => {
  test('should resolve with correct value', async () => {
    const result = await asyncFunction();
    expect(result).toBe('expected value');
  });
  
  test('should reject with error', async () => {
    await expect(asyncFunction()).rejects.toThrow('error message');
  });
});

浏览器兼容性

现代浏览器基本都支持async/await，但对于旧浏览器可能需要转译。Babel等工具可以将async/await转换为ES5兼容的代码。

// Babel转译前的代码
async function oldBrowserSupport() {
  const data = await fetchData();
  console.log(data);
}

// 转译后的代码大致如下
function oldBrowserSupport() {
  return _asyncToGenerator(function* () {
    const data = yield fetchData();
    console.log(data);
  })();
}

高级模式

async/await可以与许多高级模式结合使用，如异步迭代器、异步生成器等。这些模式可以处理更复杂的异步场景。

// 异步迭代器示例
async function* asyncGenerator() {
  let i = 0;
  while (i < 3) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i++;
  }
}

(async function() {
  for await (const num of asyncGenerator()) {
    console.log(num); // 0, 1, 2
  }
})();