JavaScript 中的异步编程：从回调到 Promise

ZhouAndrew 2024-09-25

展开全文

JavaScript 是一种广泛使用的编程语言，特别是在前端开发领域。随着 Web 应用变得越来越复杂，异步编程成为处理网络请求、文件操作和其他耗时任务的关键技术。本文将介绍 JavaScript 中异步编程的基本概念，并逐步探讨从回调（Callback）到 Promise 的演进过程。

1. 回调函数

回调函数是一种早期的异步编程模式。它允许在某个操作完成后执行一段代码。回调函数通常作为参数传递给另一个函数。
示例：使用回调函数读取文件

const fs = require('fs');

fs.readFile('./example.txt', 'utf-8', (err, data) => {
  if (err) {
    console.error('Error reading file:', err);
    return;
  }
  console.log('File content:', data);
});

2. 回调地狱

当多个异步操作需要按顺序执行时，嵌套的回调函数会导致代码难以阅读和维护，这种现象称为“回调地狱”。
示例：嵌套的回调函数

fs.readFile('./file1.txt', 'utf-8', (err, data1) => {
  if (err) {
    console.error('Error reading file1:', err);
    return;
  }
  fs.readFile('./file2.txt', 'utf-8', (err, data2) => {
    if (err) {
      console.error('Error reading file2:', err);
      return;
    }
    console.log('Combined content:', data1 + data2);
  });
});

3. Promise

Promise 是一种更优雅的异步编程模式，它可以避免回调地狱的问题。Promise 对象代表一个最终可能完成或失败的操作，并附带相应的值。
创建 Promise

const readFilePromise = (filename) => {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, 'utf-8', (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });
};

链式调用

Promise 支持链式调用，使得多个异步操作可以顺序执行，代码更加简洁易读。
示例：使用 Promise 读取多个文件

readFilePromise('./file1.txt')
  .then(data1 => {
    return readFilePromise('./file2.txt').then(data2 => {
      return data1 + data2;
    });
  })
  .then(combinedData => {
    console.log('Combined content:', combinedData);
  })
  .catch(err => {
    console.error('Error:', err);
  });

4. async/await

async/await 是基于 Promise 的语法糖，使得异步代码看起来更像同步代码，进一步简化了异步编程。
示例：使用 async/await 读取多个文件

const readFileAsync = async (filename) => {
  try {
    const data = await readFilePromise(filename);
    return data;
  } catch (err) {
    throw err;
  }
};

(async () => {
  try {
    const data1 = await readFileAsync('./file1.txt');
    const data2 = await readFileAsync('./file2.txt');
    console.log('Combined content:', data1 + data2);
  } catch (err) {
    console.error('Error:', err);
  }
})();