异步处理利器：JavaScript 中巧用回调、Promise、async/await

2023-12-14 03:27:02

JavaScript 中的异步处理

在 JavaScript 中，异步处理是指程序在等待一个事件发生时继续执行。常见的异步事件包括网络请求、文件读取、定时器等。

处理异步事件有几种方法，每种方法都有其优缺点。

1. 回调函数

回调函数是一种最基本、最常用的异步处理方法。它是一个函数，作为参数传递给另一个函数，并在那个函数执行完后再执行。

例如，以下代码使用回调函数来处理一个网络请求：

function makeRequest(url, callback) {
  const request = new XMLHttpRequest();
  request.open('GET', url);
  request.onload = function() {
    if (request.status === 200) {
      callback(request.responseText);
    } else {
      callback(new Error('Request failed'));
    }
  };
  request.send();
}

makeRequest('https://example.com/api/data', function(data) {
  console.log(data);
});

2. Promise

Promise 是 JavaScript 中处理异步事件的另一种方式。它是一个对象，代表一个异步操作的结果。

Promise 有三个状态：pending、fulfilled 和 rejected。pending 表示异步操作正在进行中，fulfilled 表示异步操作已成功完成，rejected 表示异步操作已失败。

以下代码使用 Promise 来处理一个网络请求：

function makeRequest(url) {
  return new Promise(function(resolve, reject) {
    const request = new XMLHttpRequest();
    request.open('GET', url);
    request.onload = function() {
      if (request.status === 200) {
        resolve(request.responseText);
      } else {
        reject(new Error('Request failed'));
      }
    };
    request.send();
  });
}

makeRequest('https://example.com/api/data')
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

3. async/await

async/await 是 JavaScript 中处理异步事件的最新方法。它允许您使用更同步的方式编写异步代码。

要使用 async/await，您需要使用 async 声明一个函数。在 async 函数中，您可以使用 await 关键字等待一个 Promise。

以下代码使用 async/await 来处理一个网络请求：

async function makeRequest(url) {
  const response = await fetch(url);
  const data = await response.text();
  return data;
}

makeRequest('https://example.com/api/data')
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });