异步与等待 JavaScript

在 JavaScript 中，执行一些需要时间的操作可能会卡住整个程序，例如通过网络请求数据或是从文件中读取数据。在这种情况下，异步编程非常有用。异步编程可以让程序在等待操作完成的同时继续执行其他代码。最常见的异步编程方式是使用回调函数。但是回调函数嵌套多了会导致代码难以维护和理解。为了解决这个问题，ES2017 引入了 async 和 await，使得异步编程变得更加容易。

什么是异步？

在 JavaScript 中，所有的代码都是单线程执行的。也就是说，每个操作都需要等待前一个操作执行完成才能继续执行。在执行一个需要时间的操作时，程序可能需要等待很长时间，直到这个操作完成。在这个等待时间中，程序会阻塞，不会执行其他任务。这种被阻塞的状态称为同步。相反，异步编程可以让程序在等待时间中继续执行其他任务。

回调函数

在异步编程中，回调函数是非常常见的方法。回调函数是一种将函数作为参数传递给另一个函数的方式。在异步编程中，回调函数通常用于处理异步操作的结果。

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

function makeRequest(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.onload = function () {
    if (xhr.status === 200) {
      callback(null, xhr.responseText);
    } else {
      callback(xhr.statusText, null);
    }
  };
  xhr.onerror = function () {
    callback(xhr.statusText, null);
  };
  xhr.send();
}

makeRequest("https://jsonplaceholder.typicode.com/users/1", function (err, result) {
  if (err) {
    console.log("Error:", err);
  } else {
    console.log("Result:", result);
  }
});

这个函数将一个 URL 和一个回调函数作为参数。当请求完成时，如果请求成功，回调函数将使用数据调用，否则将使用错误消息调用。

回调函数嵌套多了会导致代码难以维护和理解。

异步函数与 await

使用 async 和 await 可以让异步编程变得更加容易。async 和 await 通过将异步操作转换为同步代码的形式来解决这个问题。在使用 async 和 await 时，程序会在遇到一个异步操作时暂停，直到操作完成。为了实现这个目的，async 函数必须对它内部执行的异步操作使用 await 关键字。

下面是一个使用 async 和 await 的例子：

async function main() {
  try {
    let url = "https://jsonplaceholder.typicode.com/users/1";
    let response = await fetch(url);
    let user = await response.json();
    console.log(user);
  } catch (err) {
    console.log("An error occurred:", err);
  }
}

main();

在这个例子中，我们首先定义一个名为 main 的 async 函数。在函数中，我们调用了 fetch 函数来获取用户数据，然后使用 await 关键字暂停程序，直到数据返回。我们然后使用 await 关键字暂停程序，直到响应被解析为 JSON 数据。最后，我们将用户数据打印到控制台上。

使用 async 和 await 可以让异步代码看起来像同步代码，这样可以使代码更加容易理解和维护。

总结

异步编程是现代 Web 应用程序中的一个重要方面。它可以让程序在等待时间中继续执行其他任务，从而提高程序的性能和响应能力。async 和 await 是一种使得异步代码更易于编写和理解的方式。我们应该尽可能地使用这些技术来提高我们的代码品质和效率。