掌握 Async/Await，轻松掌控 JavaScript 异步编程

2024-02-04 12:57:34

异步编程简介

在 JavaScript 中，异步编程是一种处理不会立即返回结果的函数或操作的方法。异步编程通常用于处理 I/O 操作，例如网络请求或文件读写。

在传统的 JavaScript 中，处理异步操作的常见方法是使用回调函数。回调函数是一个在异步操作完成后被调用的函数。例如，以下代码使用回调函数来处理 HTTP GET 请求：

const url = 'https://example.com';

const request = new XMLHttpRequest();
request.open('GET', url, true);

request.onload = function() {
  if (request.status === 200) {
    console.log(request.responseText);
  } else {
    console.error(request.statusText);
  }
};

request.send();

在上面的示例中，当 HTTP GET 请求完成时，onload 事件侦听器函数就会被调用。onload 函数检查请求的状态，并根据请求的状态来输出响应文本或错误消息。

Async/Await 简介

Async/Await 是 JavaScript 中的一种语法糖，它使异步编程变得更加简单和容易理解。Async/Await 是基于 Promise 的，Promise 是 JavaScript 中处理异步操作的另一种方法。

Promise 是一个表示异步操作最终完成或失败的 JavaScript 对象。当异步操作完成时，Promise 会被解析（resolve）或拒绝（reject）。解析的 Promise 会返回一个值，而拒绝的 Promise 会返回一个错误。

Async/Await 函数是一种特殊的函数，它允许你使用 await 来等待 Promise 的解析。当 await 关键字被使用时，函数会暂停执行，直到 Promise 被解析。

如何使用 Async/Await

要使用 Async/Await，你需要先将函数声明为 async 函数。例如：

async function myAsyncFunction() {
  // 异步操作代码
}

一旦你声明了 async 函数，你就可以使用 await 关键字来等待 Promise 的解析。例如：

async function myAsyncFunction() {
  const response = await fetch('https://example.com');
  const data = await response.json();

  console.log(data);
}

在上面的示例中，fetch() 函数返回一个 Promise，它表示 HTTP GET 请求。await 关键字会暂停 myAsyncFunction() 函数的执行，直到 fetch() 函数的 Promise 被解析。一旦 fetch() 函数的 Promise 被解析，myAsyncFunction() 函数就会继续执行，并将 HTTP GET 请求的响应数据输出到控制台。