掌握异步编程利器：Promise、Async与Await

2024-02-20 17:35:30

异步编程的必要性

在理解promise、async与await之前，我们先来了解一下异步编程的必要性。在传统同步编程模式中，代码必须按顺序执行，每一步完成后才能执行下一步。这种模式虽然简单易懂，但存在明显的局限性。例如，在进行网络请求时，浏览器需要花费一定时间从服务器获取数据。如果此时浏览器一直等待服务器响应，那么其他任务就无法继续执行，导致页面失去响应。

为了解决这个问题，异步编程应运而生。异步编程的核心思想是，当遇到耗时操作时，浏览器不必等待其完成，而是继续执行其他任务。当耗时操作完成后，浏览器会通过回调函数通知程序，程序再继续执行后续任务。这样一来，程序就不会被耗时操作阻塞，页面也能保持响应。

Promise：异步编程的利器

Promise是JavaScript中用于处理异步操作的利器。它是一种对象，用于表示异步操作的状态（进行中、成功或失败）以及其结果。Promise拥有三个状态：

Pending：初始状态，表示异步操作尚未开始或正在进行中。
Fulfilled：成功状态，表示异步操作已完成且成功。
Rejected：失败状态，表示异步操作已完成但失败。

Promise提供了then()方法，用于处理异步操作的结果。then()方法接收两个回调函数作为参数，第一个回调函数用于处理异步操作成功的结果，第二个回调函数用于处理异步操作失败的结果。

Async与Await：让异步编程更简单

Async与await是ES2017中引入的两个，用于简化异步编程。async函数是一种特殊的函数，它可以包含异步操作。当async函数遇到await关键字时，函数将暂停执行，等待异步操作完成，然后继续执行。

使用async与await，可以将异步编程代码写成同步代码的风格，从而大大降低代码的复杂性。例如，以下代码使用传统的方式进行异步网络请求：

function getJson(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(new Error('Request failed'));
      }
    };
    xhr.onerror = () => {
      reject(new Error('Network error'));
    };
    xhr.send();
  });
}

使用async与await，可以将上面的代码重写成以下形式：

async function getJson(url) {
  const response = await fetch(url);
  if (response.status === 200) {
    return response.json();
  } else {
    throw new Error('Request failed');
  }
}