JS中的then 与 await

简介

在进行异步操作时，JavaScript提供了两种不同的机制：Promise和async/await。在Promise中，我们可以使用then捕获异步请求的结果，而在async/await方法中，我们可以使用await来暂停代码的执行，等待异步操作的结果。这两种机制虽然很不同，但它们都能够帮助我们更好地组织异步代码。

Promise中的then

在Promise中，我们通过链式调用then方法来处理异步请求的结果。例如，我们可以使用fetch方法来获取一个URL的内容，然后通过then方法捕获结果：

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在上面的代码中，我们首先使用fetch方法来获取指定URL的内容。一旦获得了响应，我们可以使用第一个then方法将其转换为JSON格式的数据。第二个then方法将此数据作为参数，并将其输出到控制台上。如果在任何一个步骤中遇到了错误，则会调用catch方法来处理它。

async/await方法

async/await方法是一种比Promise更加直观的方法来处理异步代码，因为它们使用了类似于同步代码的语法。在async/await方法中，我们可以使用await关键字来等待异步操作的结果。例如，我们可以使用await来暂停代码的执行，直到fetch(url)操作完成并返回结果。

async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

在上面的代码中，我们定义了一个名为fetchData的异步函数，并传入了一个URL参数。在函数中，我们首先使用await来暂停代码执行，直到fetch(url)操作完成并返回一些数据。一旦我们获得了响应，我们可以使用await在响应中提取JSON格式的数据。最后，我们将这些数据打印到控制台上。如果在任何一个步骤中遇到了错误，则会调用catch方法来处理它。

两种方法的比较

Promise和async/await方法都可以帮助我们更好地组织异步代码。虽然Promise需要我们手动处理回调函数，但它们可以更好地处理异步请求的执行顺序。而async/await方法则提供了更直观的语法和处理错误的方式。

在具体情况下，我们可以选择其中一种方法或两种方法之一来处理异步代码。它们之间的差异很小，主要是在语法和风格上有所不同。在大多数情况下，我们可以让代码的需求来决定我们选择哪种方式。