JavaScript 中怎么用 async/await 改造传统的回调函数-js教程-PHP中文网

用async/await改造回调函数的核心是先将回调封装为promise，再用await等待，从而消除嵌套、统一错误处理、提升可读性；需确保await的对象是promise实例，不可直接替换函数声明。

javascript 中怎么用 async/await 改造传统的回调函数

用 async/await 改造回调函数，核心是先把回调逻辑封装成 Promise，再用 await 等待它完成。不是直接“把 function 换成 async function”就行，关键在消除回调嵌套、统一错误处理、让异步流程像同步一样可读。

第一步：把回调函数包装成 Promise

大多数传统回调（比如 Node.js 的 fs.readFile、浏览器的 setTimeout 或老式 AJAX）本身不返回 Promise。得手动包一层：

// 原始回调写法
fs.readFile('data.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});

// 改造成 Promise 版本（推荐用 util.promisify，或手写）
const fs = require('fs').promises; // ✅ Node.js 10+ 直接用内置 promises API
// 或者手写：
const readFile = (path, encoding) => {
  return new Promise((resolve, reject) => {
    fs.readFile(path, encoding, (err, data) => {
      if (err) reject(err);
      else resolve(data);
    });
  });
};

第二步：用 async/await 替代回调嵌套

原来层层嵌套的回调（“回调地狱”），现在可以扁平化书写：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

// 回调地狱示例
getData((err, a) => {
  if (err) return handleError(err);
  getMoreData(a, (err, b) => {
    if (err) return handleError(err);
    saveData(b, (err) => {
      if (err) return handleError(err);
      console.log('done');
    });
  });
});

// 改造成 async/await
async function handleData() {
  try {
    const a = await getData();
    const b = await getMoreData(a);
    await saveData(b);
    console.log('done');
  } catch (err) {
    handleError(err);
  }
}

第三步：注意错误处理要统一用 try/catch

Promise 链中抛出的错误、reject、或 await 后的 Promise 失败，都会被 try/catch 捕获——这比每个回调里写 if (err)... 干净得多：

不要在 await 后还写 .catch()，除非你只想局部捕获、不中断后续流程
顶层 async 函数的异常，仍需被调用方处理（例如 handleData().catch(...)）
如果某个 await 可失败但不影响整体，可用 await promise.catch(() => null) 或条件判断

第四步：兼容老接口时的小技巧

对没有 Promise 版本的老库（如某些 SDK），可快速封装：

// 封装微信小程序 wx.request
const request = (options) => {
  return new Promise((resolve, reject) => {
    wx.request({
      ...options,
      success: resolve,
      fail: reject
    });
  });
};

// 使用
async function fetchUser() {
  const res = await request({ url: '/api/user' });
  return res.data;
}

不复杂但容易忽略：async/await 本质是 Promise 语法糖，它不能让同步阻塞变异步，也不能让原本不支持 Promise 的 API 自动支持——必须先确保你 await 的是一个 Promise 实例。