跳至主要內容

async与await

Kpsmart2025年3月7日大约 17 分钟

async与await

async/await是ES2017引入的异步编程语法糖，使异步代码看起来像同步代码。本文将详细介绍async/await的工作原理、错误处理、并发控制以及与Promise的结合使用，帮助您编写更清晰、更高效的异步代码。

基础概念

async函数

async关键字用于声明一个异步函数，该函数会自动返回一个Promise：

// 声明async函数
async function fetchUserData() {
  return { name: '张三', age: 30 };
}

// 等价于
function fetchUserDataPromise() {
  return Promise.resolve({ name: '张三', age: 30 });
}

// 使用async函数
fetchUserData().then(user => {
  console.log('用户数据:', user); // 输出: 用户数据: { name: '张三', age: 30 }
});

即使函数体内没有任何异步操作，async函数也会返回一个Promise。如果函数返回一个值，该值会被包装在一个已解决的Promise中；如果函数抛出错误，该错误会被包装在一个已拒绝的Promise中。

await表达式

await关键字只能在async函数内部使用，用于等待一个Promise完成：

async function fetchUserProfile() {
  console.log('开始获取用户资料');
  
  // 等待Promise完成
  const user = await fetchUserData();
  console.log('用户数据已获取:', user);
  
  // 等待另一个Promise
  const posts = await fetchUserPosts(user.id);
  console.log('用户文章已获取:', posts);
  
  return { user, posts };
}

// 调用async函数
fetchUserProfile().then(result => {
  console.log('所有数据:', result);
});

console.log('fetchUserProfile函数已调用');

// 输出顺序:
// 1. "fetchUserProfile函数已调用"
// 2. "开始获取用户资料"
// 3. "用户数据已获取: { name: '张三', age: 30 }"
// 4. "用户文章已获取: [...]"
// 5. "所有数据: { user: {...}, posts: [...] }"

await表达式会暂停当前async函数的执行，等待Promise完成，然后返回Promise的结果值。这使得异步代码可以按照同步的方式编写，大大提高了可读性。

工作原理

与Promise的关系

async/await实际上是Promise的语法糖，它建立在Promise之上，但提供了更简洁的语法：

// 使用Promise链
function fetchDataWithPromises() {
  return fetchUser(userId)
    .then(user => {
      return fetchPosts(user.id)
        .then(posts => {
          return { user, posts };
        });
    });
}

// 使用async/await
async function fetchDataWithAsync() {
  const user = await fetchUser(userId);
  const posts = await fetchPosts(user.id);
  return { user, posts };
}

每个await表达式都会创建一个隐式的Promise链，但代码看起来更像是同步的。

执行顺序与事件循环

async/await与事件循环的交互方式如下：

async function demo() {
  console.log(1);
  await Promise.resolve();
  console.log(2);
  await Promise.resolve();
  console.log(3);
}

console.log(4);
demo();
console.log(5);

// 输出顺序: 4, 1, 5, 2, 3

执行过程：

  1. 首先执行同步代码，输出4
  2. 调用demo()，进入async函数，输出1
  3. 遇到第一个await，创建微任务并暂停函数执行
  4. 继续执行同步代码，输出5
  5. 同步代码执行完毕，检查微任务队列，执行第一个await后的代码，输出2
  6. 遇到第二个await，再次创建微任务并暂停
  7. 检查微任务队列，执行第二个await后的代码，输出3

编译转换

JavaScript引擎会将async/await代码转换为使用Promise和生成器的等效代码。简化的转换过程如下：

// 原始async/await代码
async function fetchData() {
  const user = await fetchUser();
  const posts = await fetchPosts(user.id);
  return { user, posts };
}

// 转换后的等效代码（简化版）
function fetchData() {
  return new Promise((resolve, reject) => {
    const generator = function* () {
      try {
        const user = yield fetchUser();
        const posts = yield fetchPosts(user.id);
        resolve({ user, posts });
      } catch (error) {
        reject(error);
      }
    }();
    
    function step(nextValue) {
      try {
        const result = generator.next(nextValue);
        if (result.done) return;
        
        Promise.resolve(result.value)
          .then(value => step(value))
          .catch(error => generator.throw(error));
      } catch (error) {
        reject(error);
      }
    }
    
    step();
  });
}

这种转换使得JavaScript引擎能够在不阻塞主线程的情况下，让异步代码看起来像同步代码。

错误处理

try/catch捕获错误

在async函数中，可以使用传统的try/catch语句捕获错误，包括Promise的拒绝：

async function fetchUserData() {
  try {
    const response = await fetch('/api/user');
    
    if (!response.ok) {
      throw new Error(`HTTP错误: ${response.status}`);
    }
    
    const userData = await response.json();
    return userData;
  } catch (error) {
    console.error('获取用户数据失败:', error);
    // 可以返回默认值
    return { name: '未知用户', isDefault: true };
  }
}

这比Promise的.catch()方法更加直观，特别是在处理多个异步操作时。

错误传播

如果不在async函数内部捕获错误，错误会被包装在返回的Promise中：

async function riskyOperation() {
  // 这个错误不会在函数内部被捕获
  const data = await fetchData();
  return data.nonExistentProperty.value; // 将抛出TypeError
}

// 错误会传播到这里
riskyOperation()
  .then(result => {
    console.log('成功:', result);
  })
  .catch(error => {
    console.error('捕获到错误:', error); // 这里会捕获到TypeError
  });

全局错误处理

对于未捕获的Promise拒绝，可以设置全局处理器：

// 在浏览器中
window.addEventListener('unhandledrejection', event => {
  console.error('未处理的Promise拒绝:', event.reason);
  // 防止默认处理（如控制台警告）
  event.preventDefault();
});

// 在Node.js中
process.on('unhandledRejection', (reason, promise) => {
  console.error('未处理的Promise拒绝:', reason);
});

错误处理最佳实践

async function robustFunction() {
  try {
    // 1. 对特定操作使用try/catch
    try {
      await riskyOperation1();
    } catch (specificError) {
      // 处理特定操作的错误
      console.warn('特定操作失败，使用备选方案');
      await fallbackOperation();
    }
    
    // 2. 继续执行其他操作
    const result = await normalOperation();
    
    return result;
  } catch (error) {
    // 3. 捕获所有其他未处理的错误
    console.error('操作失败:', error);
    
    // 4. 根据错误类型进行不同处理
    if (error instanceof NetworkError) {
      // 处理网络错误
      return { error: 'network', message: '网络连接失败' };
    } else if (error instanceof ValidationError) {
      // 处理验证错误
      return { error: 'validation', message: '数据验证失败' };
    }
    
    // 5. 默认错误处理
    return { error: 'unknown', message: '未知错误' };
  } finally {
    // 6. 清理资源
    await cleanup();
  }
}

并发控制

顺序执行

默认情况下，多个await表达式会按顺序执行，每个await都会等待前一个完成：

async function sequential() {
  console.time('sequential');
  
  const result1 = await slowOperation1(); // 等待1秒
  const result2 = await slowOperation2(); // 等待1秒
  const result3 = await slowOperation3(); // 等待1秒
  
  console.timeEnd('sequential'); // 大约3秒
  return [result1, result2, result3];
}

并行执行

使用Promise.all可以并行执行多个异步操作：

async function parallel() {
  console.time('parallel');
  
  // 同时启动所有操作
  const promise1 = slowOperation1();
  const promise2 = slowOperation2();
  const promise3 = slowOperation3();
  
  // 等待所有操作完成
  const [result1, result2, result3] = await Promise.all([
    promise1, promise2, promise3
  ]);
  
  console.timeEnd('parallel'); // 大约1秒
  return [result1, result2, result3];
}

更简洁的写法：

async function parallelShort() {
  console.time('parallelShort');
  
  const results = await Promise.all([
    slowOperation1(),
    slowOperation2(),
    slowOperation3()
  ]);
  
  console.timeEnd('parallelShort'); // 大约1秒
  return results;
}

部分并行执行

有时需要一些操作并行执行，而另一些按顺序执行：

async function mixedStrategy() {
  // 首先获取必要的用户数据
  const user = await fetchUser(userId);
  
  // 然后并行获取用户相关的数据
  const [posts, followers, settings] = await Promise.all([
    fetchPosts(user.id),
    fetchFollowers(user.id),
    fetchSettings(user.id)
  ]);
  
  // 基于上面的结果顺序处理
  const enhancedPosts = await enhancePostsWithComments(posts);
  
  return {
    user,
    posts: enhancedPosts,
    followers,
    settings
  };
}

使用Promise.allSettled处理可能失败的并行操作

当并行执行多个操作，但不希望一个失败影响其他操作时：

async function robustParallel() {
  const results = await Promise.allSettled([
    fetchCriticalData().catch(error => ({ error })),
    fetchOptionalData1().catch(error => ({ error })),
    fetchOptionalData2().catch(error => ({ error }))
  ]);
  
  // 处理结果
  const processedResults = results.map(result => {
    if (result.status === 'fulfilled') {
      return result.value;
    } else {
      console.warn('操作失败:', result.reason);
      return null; // 或默认值
    }
  });
  
  return processedResults;
}

控制并发数量

当需要处理大量异步操作但想限制并发数量时：

async function processWithConcurrencyLimit(items, concurrency = 3) {
  const results = [];
  const inProgress = new Set();
  
  for (const [index, item] of items.entries()) {
    // 创建处理单个项目的Promise
    const promise = (async () => {
      try {
        const result = await processItem(item);
        results[index] = result;
      } catch (error) {
        results[index] = { error };
      } finally {
        inProgress.delete(promise);
      }
    })();
    
    // 添加到进行中的集合
    inProgress.add(promise);
    
    // 如果达到并发限制，等待其中一个完成
    if (inProgress.size >= concurrency) {
      await Promise.race(inProgress);
    }
  }
  
  // 等待所有剩余的操作完成
  await Promise.all(inProgress);
  
  return results;
}

// 使用示例
async function main() {
  const items = Array.from({ length: 20 }, (_, i) => `item-${i}`);
  const results = await processWithConcurrencyLimit(items, 5);
  console.log('所有项目处理完成:', results);
}

高级模式与技巧

自动重试

实现带有自动重试功能的异步操作：

async function fetchWithRetry(url, options = {}, retries = 3, delay = 1000) {
  try {
    return await fetch(url, options);
  } catch (error) {
    if (retries <= 0) {
      throw error;
    }
    
    console.log(`请求失败，${delay}ms后重试，剩余重试次数: ${retries}`);
    
    // 等待指定时间
    await new Promise(resolve => setTimeout(resolve, delay));
    
    // 递归调用，减少重试次数
    return fetchWithRetry(url, options, retries - 1, delay * 2);
  }
}

// 使用示例
async function fetchData() {
  try {
    const response = await fetchWithRetry('/api/data', {}, 3, 1000);
    return await response.json();
  } catch (error) {
    console.error('所有重试都失败了:', error);
    return null;
  }
}

超时控制

为异步操作添加超时限制：

async function fetchWithTimeout(url, options = {}, timeout = 5000) {
  // 创建一个超时Promise
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => {
      reject(new Error(`请求超时: ${url}`));
    }, timeout);
  });
  
  // 创建实际的fetch Promise
  const fetchPromise = fetch(url, options);
  
  // 使用Promise.race竞争执行
  try {
    const response = await Promise.race([fetchPromise, timeoutPromise]);
    return response;
  } catch (error) {
    if (error.message.includes('请求超时')) {
      // 取消原始fetch请求（如果浏览器支持）
      if (typeof AbortController !== 'undefined' && options.signal instanceof AbortController.signal.constructor) {
        options.signal.abort();
      }
    }
    throw error;
  }
}

// 使用AbortController实现更优雅的超时控制
async function fetchWithAbort(url, options = {}, timeout = 5000) {
  const controller = new AbortController();
  const { signal } = controller;
  
  // 设置超时
  const timeoutId = setTimeout(() => {
    controller.abort();
  }, timeout);
  
  try {
    const response = await fetch(url, { ...options, signal });
    clearTimeout(timeoutId);
    return response;
  } catch (error) {
    clearTimeout(timeoutId);
    if (error.name === 'AbortError') {
      throw new Error(`请求超时: ${url}`);
    }
    throw error;
  }
}

取消异步操作

使用AbortController取消正在进行的异步操作：

async function fetchWithCancellation(url, options = {}) {
  const controller = new AbortController();
  const { signal } = controller;
  
  // 返回fetch Promise和取消函数
  return {
    promise: fetch(url, { ...options, signal }),
    cancel: () => controller.abort()
  };
}

// 使用示例
async function loadData() {
  const { promise, cancel } = fetchWithCancellation('/api/large-data');
  
  // 在某个条件下取消请求
  document.getElementById('cancelButton').addEventListener('click', () => {
    console.log('用户取消了请求');
    cancel();
  });
  
  try {
    const response = await promise;
    const data = await response.json();
    return data;
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('请求已取消');
      return null;
    }
    throw error;
  }
}

缓存异步结果

实现简单的缓存机制，避免重复的异步操作：

// 简单的内存缓存
const cache = new Map();

async function fetchWithCache(url, options = {}, ttl = 60000) {
  const cacheKey = `${url}-${JSON.stringify(options)}`;
  
  // 检查缓存
  const cached = cache.get(cacheKey);
  if (cached && cached.expires > Date.now()) {
    console.log(`从缓存获取: ${url}`);
    return cached.data;
  }
  
  // 如果没有缓存或已过期，执行请求
  console.log(`从网络获取: ${url}`);
  const response = await fetch(url, options);
  const data = await response.json();
  
  // 更新缓存
  cache.set(cacheKey, {
    data,
    expires: Date.now() + ttl
  });
  
  return data;
}

// 使用示例
async function getUserProfile(userId) {
  // 缓存60秒
  return fetchWithCache(`/api/users/${userId}`, {}, 60000);
}

状态管理与进度报告

管理异步操作的状态并报告进度：

async function fetchWithProgress(url, onProgress) {
  // 状态对象
  const state = {
    status: 'pending', // 'pending', 'fulfilled', 'rejected'
    progress: 0,
    result: null,
    error: null
  };
  
  // 更新状态并通知
  function updateState(updates) {
    Object.assign(state, updates);
    if (onProgress) {
      onProgress({ ...state });
    }
  }
  
  try {
    // 使用fetch API的进度报告
    const response = await fetch(url);
    
    // 获取内容长度
    const contentLength = +response.headers.get('Content-Length');
    const reader = response.body.getReader();
    let receivedLength = 0;
    let chunks = [];
    
    // 读取数据流
    while (true) {
      const { done, value } = await reader.read();
      
      if (done) {
        break;
      }
      
      chunks.push(value);
      receivedLength += value.length;
      
      // 更新进度
      if (contentLength) {
        updateState({ progress: receivedLength / contentLength });
      }
    }
    
    // 合并数据块
    const chunksAll = new Uint8Array(receivedLength);
    let position = 0;
    for (const chunk of chunks) {
      chunksAll.set(chunk, position);
      position += chunk.length;
    }
    
    // 解码为文本
    const result = new TextDecoder('utf-8').decode(chunksAll);
    
    // 更新最终状态
    updateState({
      status: 'fulfilled',
      progress: 1,
      result: JSON.parse(result)
    });
    
    return state.result;
  } catch (error) {
    // 更新错误状态
    updateState({
      status: 'rejected',
      error
    });
    
    throw error;
  }
}

// 使用示例
async function downloadData() {
  try {
    const data = await fetchWithProgress('/api/large-data', state => {
      console.log(`状态: ${state.status}, 进度: ${Math.round(state.progress * 100)}%`);
      
      // 更新UI进度条
      document.getElementById('progressBar').style.width = `${Math.round(state.progress * 100)}%`;
    });
    
    console.log('下载完成:', data);
    return data;
  } catch (error) {
    console.error('下载失败:', error);
    throw error;
  }
}

与其他JavaScript特性结合

与解构赋值结合

使用解构赋值简化异步结果的处理：

async function getUserDetails(userId) {
  // 获取用户数据
  const userData = await fetchUser(userId);
  
  // 使用解构赋值提取需要的字段
  const { name, email, role } = userData;
  
  // 并行获取额外信息
  const [permissions, preferences] = await Promise.all([
    fetchPermissions(role),
    fetchPreferences(userId)
  ]);
  
  return {
    name,
    email,
    permissions,
    preferences
  };
}

与生成器函数结合

使用生成器函数实现更复杂的异步控制流：

// 一个简单的异步任务运行器
function runTasks(taskGenerator) {
  const iterator = taskGenerator();
  
  function handleNext(value) {
    const next = iterator.next(value);
    
    if (next.done) {
      return Promise.resolve(next.value);
    }
    
    return Promise.resolve(next.value)
      .then(handleNext)
      .catch(err => iterator.throw(err));
  }
  
  return handleNext();
}

// 使用生成器定义任务序列
function* taskSequence() {
  try {
    // 第一个任务
    const result1 = yield asyncTask1();
    console.log('任务1完成:', result1);
    
    // 基于第一个任务的结果决定下一步
    if (result1.needsExtra) {
      const extra = yield asyncExtraTask();
      console.log('额外任务完成:', extra);
    }
    
    // 第二个任务
    const result2 = yield asyncTask2(result1.id);
    console.log('任务2完成:', result2);
    
    return '所有任务完成';
  } catch (error) {
    console.error('任务序列出错:', error);
    throw error;
  }
}

// 运行任务序列
runTasks(taskSequence)
  .then(result => console.log(result))
  .catch(error => console.error('最终错误:', error));

与类方法结合

在类中使用async方法：

class DataService {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
    this.cache = new Map();
  }
  
  // 异步实例方法
  async fetchData(endpoint, options = {}) {
    const url = `${this.baseUrl}/${endpoint}`;
    
    try {
      const response = await fetch(url, options);
      
      if (!response.ok) {
        throw new Error(`HTTP错误: ${response.status}`);
      }
      
      return await response.json();
    } catch (error) {
      console.error(`获取数据失败 (${endpoint}):`, error);
      throw error;
    }
  }
  
  // 带缓存的异步方法
  async getCachedData(endpoint, ttl = 60000) {
    // 检查缓存
    if (this.cache.has(endpoint)) {
      const { data, timestamp } = this.cache.get(endpoint);
      if (Date.now() - timestamp < ttl) {
        return data;
      }
    }
    
    // 获取新数据
    const data = await this.fetchData(endpoint);
    
    // 更新缓存
    this.cache.set(endpoint, {
      data,
      timestamp: Date.now()
    });
    
    return data;
  }
  
  // 静态异步方法
  static async initialize(config) {
    // 加载配置
    const serverConfig = await fetch('/api/config').then(r => r.json());
    
    // 创建并返回实例
    return new DataService(serverConfig.apiBaseUrl);
  }
}

// 使用示例
async function main() {
  try {
    // 初始化服务
    const dataService = await DataService.initialize();
    
    // 使用服务获取数据
    const users = await dataService.getCachedData('users');
    console.log('用户列表:', users);
    
    // 再次获取（将使用缓存）
    const cachedUsers = await dataService.getCachedData('users');
    console.log('缓存的用户列表:', cachedUsers);
  } catch (error) {
    console.error('服务使用出错:', error);
  }
}

性能考虑与优化

避免不必要的await

不是所有异步操作都需要立即等待：

// 不好的做法 - 串行执行
async function fetchSequential() {
  const result1 = await fetchData1();
  const result2 = await fetchData2();
  const result3 = await fetchData3();
  
  return processResults(result1, result2, result3);
}

// 好的做法 - 并行执行
async function fetchParallel() {
  // 同时启动所有请求
  const promise1 = fetchData1();
  const promise2 = fetchData2();
  const promise3 = fetchData3();
  
  // 然后等待结果
  const result1 = await promise1;
  const result2 = await promise2;
  const result3 = await promise3;
  
  return processResults(result1, result2, result3);
}

// 更简洁的写法
async function fetchParallelConcise() {
  const [result1, result2, result3] = await Promise.all([
    fetchData1(),
    fetchData2(),
    fetchData3()
  ]);
  
  return processResults(result1, result2, result3);
}

减少微任务开销

过多的await表达式会创建大量微任务，可能影响性能：

// 不好的做法 - 每次迭代都创建一个新的微任务
async function processItemsSequentially(items) {
  const results = [];
  
  for (const item of items) {
    // 每次迭代都会暂停并创建一个新的微任务
    results.push(await processItem(item));
  }
  
  return results;
}

// 更好的做法 - 批量处理
async function processItemsInBatches(items, batchSize = 5) {
  const results = [];
  
  for (let i = 0; i < items.length; i += batchSize) {
    const batch = items.slice(i, i + batchSize);
    const batchResults = await Promise.all(batch.map(processItem));
    results.push(...batchResults);
  }
  
  return results;
}

避免async/await的过度使用

不是所有函数都需要async/await：

// 不必要的async/await
async function unnecessaryAsync() {
  return 'result'; // 不需要async
}

// 更简单的实现
function simpleFunction() {
  return 'result';
}

// 不必要的await
async function fetchAndProcess() {
  const data = await Promise.resolve({ name: '张三' });
  return await Promise.resolve(data); // 第二个await是不必要的
}

// 更简洁的实现
async function betterFetchAndProcess() {
  const data = await Promise.resolve({ name: '张三' });
  return data; // async函数会自动包装返回值
}

常见陷阱与最佳实践

忘记await

最常见的错误之一是忘记使用await：

// 错误 - 忘记await
async function fetchData() {
  try {
    const response = fetch('/api/data'); // 忘记await
    const data = await response.json(); // 将失败，因为response不是Response对象
    return data;
  } catch (error) {
    console.error('错误:', error);
  }
}

// 正确做法
async function fetchDataCorrect() {
  try {
    const response = await fetch('/api/data'); // 使用await
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('错误:', error);
  }
}

错误处理不当

不正确的错误处理可能导致未捕获的Promise拒绝：

// 错误 - 在async函数中没有处理错误
async function fetchAndSaveUser() {
  const userData = await fetchUserData(); // 可能抛出错误
  saveToDatabase(userData); // 如果前面出错，这里不会执行
  return true;
}

// 调用函数但不处理错误
fetchAndSaveUser(); // 如果出错，错误会被吞没

// 正确做法 - 在调用处处理错误
fetchAndSaveUser()
  .then(result => {
    console.log('用户保存成功');
  })
  .catch(error => {
    console.error('保存用户失败:', error);
  });

// 或者在函数内部处理错误
async function robustFetchAndSaveUser() {
  try {
    const userData = await fetchUserData();
    await saveToDatabase(userData);
    return true;
  } catch (error) {
    console.error('获取或保存用户失败:', error);
    return false;
  }
}

循环中的await

在循环中使用await需要注意：

// 问题 - 在forEach中使用await无效
async function processItems(items) {
  items.forEach(async (item) => {
    // 这里的await不会按预期工作
    // forEach不会等待异步操作完成
    const result = await processItem(item);
    console.log(result);
  });
  console.log('所有项目处理完成'); // 这会在任何处理完成前打印
}

// 正确做法1 - 使用for...of循环
async function processItemsCorrect(items) {
  for (const item of items) {
    const result = await processItem(item);
    console.log(result);
  }
  console.log('所有项目处理完成'); // 现在这会在所有处理完成后打印
}

// 正确做法2 - 使用Promise.all并行处理
async function processItemsParallel(items) {
  const promises = items.map(item => processItem(item));
  const results = await Promise.all(promises);
  results.forEach(result => console.log(result));
  console.log('所有项目处理完成');
}

丢失this上下文

在类方法中使用async/await时，需要注意this上下文：

class UserService {
  constructor(apiClient) {
    this.apiClient = apiClient;
    
    // 错误 - 会丢失this上下文
    document.getElementById('loadButton').addEventListener('click', this.loadUser);
    
    // 正确 - 绑定this
    document.getElementById('loadButton').addEventListener('click', this.loadUser.bind(this));
    
    // 或使用箭头函数
    document.getElementById('loadButton').addEventListener('click', () => this.loadUser());
  }
  
  async loadUser() {
    try {
      // 如果this上下文丢失，this.apiClient将是undefined
      const user = await this.apiClient.fetchUser();
      this.displayUser(user);
    } catch (error) {
      console.error('加载用户失败:', error);
    }
  }
  
  displayUser(user) {
    // 显示用户信息
  }
}

忽略返回值

async函数总是返回Promise，忽略这一点可能导致问题：

// 错误 - 忽略async函数的返回值
function processData() {
  // 这里没有await，也没有处理返回的Promise
  validateAndSave(); // 异步函数，但我们没有等待它完成
  console.log('数据处理完成'); // 这会在异步操作完成前打印
}

async function validateAndSave() {
  const isValid = await validate();
  if (isValid) {
    await save();
  }
  return isValid;
}

// 正确做法
async function processDataCorrect() {
  const isValid = await validateAndSave();
  if (isValid) {
    console.log('数据验证并保存成功');
  } else {
    console.log('数据验证失败');
  }
  console.log('数据处理完成'); // 现在这会在异步操作完成后打印
}

实际应用场景

用户界面交互

在前端应用中处理用户交互：

// 表单提交处理
async function handleFormSubmit(event) {
  event.preventDefault();
  
  const submitButton = document.getElementById('submitButton');
  const statusMessage = document.getElementById('statusMessage');
  
  try {
    // 禁用按钮，显示加载状态
    submitButton.disabled = true;
    statusMessage.textContent = '提交中...';
    
    // 获取表单数据
    const formData = new FormData(event.target);
    const userData = Object.fromEntries(formData.entries());
    
    // 验证数据
    const validationErrors = validateUserData(userData);
    if (validationErrors.length > 0) {
      throw new ValidationError('表单数据无效', validationErrors);
    }
    
    // 提交数据
    const response = await fetch('/api/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(userData)
    });
    
    if (!response.ok) {
      const errorData = await response.json();
      throw new ApiError(`API错误: ${response.status}`, errorData);
    }
    
    const result = await response.json();
    
    // 显示成功消息
    statusMessage.textContent = '用户创建成功!';
    
    // 重定向到用户页面
    setTimeout(() => {
      window.location.href = `/users/${result.id}`;
    }, 1000);
  } catch (error) {
    // 处理不同类型的错误
    if (error instanceof ValidationError) {
      statusMessage.textContent = '表单数据无效，请检查输入。';
      displayValidationErrors(error.errors);
    } else if (error instanceof ApiError) {
      statusMessage.textContent = `服务器错误: ${error.message}`;
      console.error('API错误详情:', error.details);
    } else {
      statusMessage.textContent = '提交过程中发生错误，请稍后重试。';
      console.error('未处理的错误:', error);
    }
  } finally {
    // 恢复按钮状态
    submitButton.disabled = false;
  }
}

// 注册事件监听器
document.getElementById('userForm').addEventListener('submit', handleFormSubmit);

数据加载与状态管理

在应用中管理数据加载状态：

// 数据加载组件
class DataLoader {
  constructor(elementId) {
    this.element = document.getElementById(elementId);
    this.state = {
      loading: false,
      error: null,
      data: null
    };
  }
  
  // 更新UI以反映当前状态
  updateUI() {
    if (this.state.loading) {
      this.element.innerHTML = '<div class="loader">加载中...</div>';
      return;
    }
    
    if (this.state.error) {
      this.element.innerHTML = `
        <div class="error">
          <p>加载失败: ${this.state.error.message}</p>
          <button id="retryButton">重试</button>
        </div>
      `;
      document.getElementById('retryButton').addEventListener('click', () => this.loadData());
      return;
    }
    
    if (this.state.data) {
      this.element.innerHTML = `
        <div class="data-container">
          <h2>${this.state.data.title}</h2>
          <p>${this.state.data.description}</p>
          <ul>
            ${this.state.data.items.map(item => `<li>${item}</li>`).join('')}
          </ul>
        </div>
      `;
    }
  }
  
  // 异步加载数据
  async loadData() {
    try {
      // 更新状态为加载中
      this.state.loading = true;
      this.state.error = null;
      this.updateUI();
      
      // 模拟网络请求
      const response = await fetch('/api/data');
      
      if (!response.ok) {
        throw new Error(`HTTP错误: ${response.status}`);
      }
      
      // 解析数据
      const data = await response.json();
      
      // 更新状态为成功
      this.state.loading = false;
      this.state.data = data;
      this.updateUI();
    } catch (error) {
      // 更新状态为错误
      this.state.loading = false;
      this.state.error = error;
      this.updateUI();
      console.error('加载数据失败:', error);
    }
  }
}

// 使用示例
const dataLoader = new DataLoader('dataContainer');
dataLoader.loadData();

API中间件

在Node.js应用中创建异步中间件：

// Express异步错误处理中间件
function asyncHandler(fn) {
  return (req, res, next) => {
    Promise.resolve(fn(req, res, next))
      .catch(next);
  };
}

// 使用异步处理器包装路由处理函数
app.get('/users/:id', asyncHandler(async (req, res) => {
  const userId = req.params.id;
  const user = await db.users.findById(userId);
  
  if (!user) {
    // Express会捕获这个错误并传递给错误处理中间件
    const error = new Error('用户不存在');
    error.statusCode = 404;
    throw error;
  }
  
  res.json(user);
}));

// 错误处理中间件
app.use((error, req, res, next) => {
  console.error('API错误:', error);
  
  const statusCode = error.statusCode || 500;
  const message = statusCode === 500 ? '服务器内部错误' : error.message;
  
  res.status(statusCode).json({
    error: {
      message,
      status: statusCode
    }
  });
});

总结

async/await是JavaScript中处理异步操作的强大工具，它提供了以下优势：

  1. 简化代码结构：使异步代码看起来像同步代码，提高可读性。

  2. 改进错误处理：使用标准的try/catch语句处理异步错误，更加直观。

  3. 灵活的控制流：可以轻松实现顺序执行、并行执行或混合策略。

  4. 与现有JavaScript特性无缝集成：可以与解构赋值、类方法、生成器等特性结合使用。

然而，使用async/await也需要注意一些陷阱：

  1. 忘记使用await：导致Promise未被正确等待。

  2. 错误处理不当：可能导致未捕获的Promise拒绝。

  3. 在循环中不正确使用await：可能导致意外的执行顺序。

  4. 过度使用async/await：不是所有函数都需要异步处理。

通过掌握本文介绍的高级模式和最佳实践，您可以充分利用async/await的强大功能，编写更加健壮、高效和可维护的异步JavaScript代码。

进一步学习资源