ES6 async/await终极指南：如何用同步方式写异步代码

2026-02-06 05:06:27作者：胡易黎Nicole

ES6 async/await是JavaScript异步编程的革命性特性，它让开发者能够用同步的编码风格处理异步操作。这篇终极指南将带你深入了解async/await的工作原理、优势和实践技巧，帮助你彻底掌握这一强大的异步编程工具。

什么是async/await？🤔

async/await是ES2017引入的语法糖，基于Promise构建，旨在简化异步代码的编写。async函数本质上就是Generator函数的语法改进，但更加直观易用。

核心特点：

async关键字声明异步函数
await关键字等待Promise解析
代码看起来像同步，实际上是异步执行
自动返回Promise对象

为什么选择async/await？✨

相比回调函数的优势

传统的回调函数容易导致"回调地狱"，代码嵌套层次深，难以维护。async/await通过线性的代码结构解决了这个问题。

相比Promise的优势

虽然Promise比回调函数更优雅，但then链式调用仍然不够直观。async/await让异步代码看起来就像同步代码一样清晰。

相比Generator的优势

Generator函数需要额外的执行器，而async函数自带执行器，使用更加简单方便。

基本用法详解 📝

声明async函数

// 函数声明
async function fetchData() {
  // 异步操作
}

// 函数表达式
const fetchData = async function() {
  // 异步操作
}

// 箭头函数
const fetchData = async () => {
  // 异步操作
}

// 对象方法
const obj = {
  async fetchData() {
    // 异步操作
  }
}

// 类方法
class ApiClient {
  async getData() {
    // 异步操作
  }
}

await的使用规则

await后面通常跟一个Promise对象，但也可以跟其他值：

如果是Promise：等待Promise解析
如果是普通值：直接返回该值
如果是thenable对象：按Promise处理

错误处理最佳实践 🛡️

try...catch捕获错误

async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`)
    const user = await response.json()
    return user
  } catch (error) {
    console.error('获取用户数据失败:', error)
    throw new Error('无法获取用户信息')
  }
}

Promise.catch组合使用

async function processData() {
  const data = await fetchData()
    .catch(error => {
      console.error('数据获取失败', error)
      return defaultData
    })
  
  return process(data)
}

高级技巧与优化 🚀

并行执行优化

避免不必要的串行等待，合理使用并行执行：

// 错误：串行执行，耗时较长
async function serialExecution() {
  const user = await getUser()
  const posts = await getPosts()
  const comments = await getComments()
  return { user, posts, comments }
}

// 正确：并行执行，效率更高
async function parallelExecution() {
  const [user, posts, comments] = await Promise.all([
    getUser(),
    getPosts(),
    getComments()
  ])
  return { user, posts, comments }
}

循环中的async/await

// 顺序执行
async function processItemsSequentially(items) {
  for (const item of items) {
    await processItem(item)
  }
}

// 并行执行
async function processItemsInParallel(items) {
  await Promise.all(items.map(item => processItem(item)))
}

实际应用场景 🌟

API调用封装

class ApiService {
  async get(url, options = {}) {
    try {
      const response = await fetch(url, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          ...options.headers
        }
      })
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      
      return await response.json()
    } catch (error) {
      console.error('API请求失败:', error)
      throw error
    }
  }
}

文件处理

async function processFiles(files) {
  const results = []
  
  for (const file of files) {
    try {
      const content = await readFileAsync(file)
      const processed = await processContent(content)
      results.push(processed)
    } catch (error) {
      console.warn(`处理文件 ${file} 失败:`, error)
    }
  }
  
  return results
}

常见陷阱与解决方案 ⚠️

避免在forEach中使用await

// 错误：不会按预期工作
array.forEach(async item => {
  await processItem(item)
})

// 正确：使用for循环
for (const item of array) {
  await processItem(item)
}

// 或者使用Promise.all
await Promise.all(array.map(item => processItem(item)))

正确处理并发限制

async function processWithConcurrency(items, concurrency = 5) {
  const results = []
  
  for (let i = 0; i < items.length; i += concurrency) {
    const batch = items.slice(i, i + concurrency)
    const batchResults = await Promise.all(
      batch.map(item => processItem(item))
    )
    results.push(...batchResults)
  }
  
  return results
}