精通 JS 中的异步处理，化繁为简

2023-12-26 21:28:19

异步编程与 JavaScript

JavaScript 是一种单线程语言，这意味着它一次只能执行一个任务。然而，在现代 Web 开发中，我们经常需要处理异步任务，例如向服务器发送请求或处理用户交互。异步编程允许我们在不阻塞主线程的情况下执行这些任务，从而保持界面的响应性。

回调函数

回调函数是异步编程中最基本的概念之一。它是一个在异步任务完成后执行的函数。在 JavaScript 中，我们通常使用回调函数来处理异步操作的结果。例如，以下代码使用回调函数来处理服务器请求的结果：

function makeRequest(callback) {
  // 模拟异步请求
  setTimeout(() => {
    const data = {
      name: 'John Doe',
      age: 30,
    };

    callback(data);
  }, 1000);
}

makeRequest((data) => {
  console.log(data);
});

在这个例子中，makeRequest() 函数接收一个回调函数作为参数，该回调函数将在异步请求完成后执行。当请求完成后，setTimeout() 函数将调用回调函数，并将请求的结果作为参数传递给它。

Promise

Promise 是 JavaScript 中处理异步任务的另一种方式。Promise 对象表示一个异步操作的结果，它可以处于三种状态之一：

Pending： 异步操作正在进行中。
Fulfilled： 异步操作已成功完成。
Rejected： 异步操作已失败。

Promise 的主要优点是它提供了更简洁、更易读的语法。以下代码使用 Promise 来处理服务器请求的结果：

function makeRequest() {
  // 模拟异步请求
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = {
        name: 'John Doe',
        age: 30,
      };

      resolve(data);
    }, 1000);
  });
}

makeRequest()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

在这个例子中，makeRequest() 函数返回一个 Promise 对象。当异步请求完成后，Promise 对象的状态将变为 Fulfilled，并调用 resolve() 函数。resolve() 函数将请求的结果作为参数传递给 .then() 方法。.then() 方法接收一个回调函数，该回调函数将在 Promise 对象的状态变为 Fulfilled 时执行。

async/await

async/await 是 JavaScript 中处理异步任务的最新语法。它允许我们使用同步的方式编写异步代码，从而使代码更加易读和易于理解。以下代码使用 async/await 来处理服务器请求的结果：

async function makeRequest() {
  // 模拟异步请求
  const data = await new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = {
        name: 'John Doe',
        age: 30,
      };

      resolve(data);
    }, 1000);
  });

  return data;
}

async function main() {
  try {
    const data = await makeRequest();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

main();

在这个例子中，makeRequest() 函数被标记为 async 函数，这表明它是一个异步函数。await 用于等待 makeRequest() 函数返回的结果。当 makeRequest() 函数返回结果时，await 关键字将暂停 main() 函数的执行，直到结果返回。一旦结果返回，main() 函数将继续执行。