重学JavaScript Promise API

在这篇教程中，我们将掌握如何在JavaScript中创建并使用Promise。我们将了解Promise链式调用、错误处理以及最近添加到语言中的一些Promise静态方法。

什么是Promise？

在JavaScript中，一些操作是异步的。这意味着当这些操作完成时，它们产出的结果或者值并不会立即生效。

Promise是一个特殊的JavaScript对象，它代表了异步操作的最终结果。它就像操作结果的代理。

回调函数

在拥有JavaScript Promise之前，处理异步操作最优雅的方式是使用回调。当异步操作的结果就绪时，回调就是一个运行的函数。比如说：

setTimeout(function() {

  console.log('Hello, World!');

}, 1000);

这里，setTimeout是一个异步函数，在指定的毫秒数后运行传递给它的回调函数。在本例中，它在一秒后将 "Hello, World!"打印到控制台。

此时想象我们想要在五秒之内每秒都打印一个信息。代码就会是这样的：

setTimeout(function() {

  console.log(1);

  setTimeout(function() {

    console.log(2);

    setTimeout(function() {

      console.log(3);

      setTimeout(function() {

        console.log(4);

        setTimeout(function() {

          console.log(5);

        }, 1000);

      }, 1000);

    }, 1000);

  }, 1000);

}, 1000);

以这种方式使用多个嵌套回调的异步JavaScript既容易出错又难以维护。它通常被称为回调地狱，甚至有自己的网页。

当然，这是一个臆造的例子，但它有助于说明问题。在实际场景中，我们可能会进行Ajax调用，用结果更新DOM，然后等待动画完成。或者，我们的服务器可能从客户端接收输入，验证输入，更新数据库，写入日志文件，最后发送响应。在这两种情况下，我们还需要处理发生的任何错误。

使用嵌套回调来完成这样的任务是非常痛苦的。幸运的是，Promise为我们提供了一种更简洁的语法，使我们能够将异步命令串联起来，让它们一个接一个地运行。

创建Promise

创建Promise的基本语法如下：

const promise = new Promise((resolve, reject) => {

  //asynchronous code goes here

});

首先，我们使用Promise构造函数实例化一个新的Promise对象，并传递给它一个回调函数。回调接收两个参数：resolve和reject，它们都是函数。我们所有的异步代码都在回调函数中。

如果一切运行成功，则通过调用 resolve 来实现Promise。如果出现错误，则调用 reject 拒绝Promise。我们可以向这两个方法传递值，这些值将在消费代码中可用。

要了解这在实践中是如何工作的，请参考下面的代码。该代码向web服务发出异步请求，以 JSON 格式返回一个随机的笑话：

const promise = new Promise((resolve, reject) => {

  const request = new XMLHttpRequest();

  request.open('GET', '<https://icanhazdadjoke.com/>');

  request.setRequestHeader('Accept', 'application/json');

  request.onload = () => {

    if (request.status === 200) {

      resolve(request.response); // we got data here, so resolve the Promise

    } else {

      reject(Error(request.statusText)); // status is not 200 OK, so reject

    }

  };

  request.onerror = () => {

    reject(Error('Error fetching data.')); // error occurred, reject the  Promise

  };

  request.send(); // send the request

});

Promise构造函数

我们首先使用Promise构造函数创建一个新的Promise对象。该构造函数用于封装尚未支持Promise的函数或API，例如上面的XMLHttpRequest对象。传递给Promise构造函数的回调包含用于从远程服务获取数据的异步代码。(注意，我们在这里使用的是箭头函数）在回调中，我们向 https://icanhazdadjoke.com/ 创建了一个 Ajax 请求，该请求以 JSON 格式返回一个随机的笑话。

当从远程服务器收到成功的响应时，会传递给resolve方法。如果发生任何错误（无论是在服务器上还是在网络层），reject方法将调用一个Error对象。

then方法

当我们实例化一个Promise对象时，我们将得到一个未来可用数据的代理。在我们的例子中，我们期待从远程服务返回一些数据。那么，我们如何知道数据何时可用呢？这就是使用Promise.then()函数的地方：

const promise = new Promise((resolve, reject) => { ... });

promise.then((data) => {

  console.log('Got data! Promise fulfilled.');

  document.body.textContent = JSON.parse(data).joke;

}, (error) => {

  console.error('Promise rejected.');

  console.error(error.message);

});

该函数可以接受两个参数：成功回调和失败回调。这些回调将在Promise解决（即fulfilled或rejected）时调用。如果Promise实现，成功回调将使用我们传递给resolve的实际数据触发。如果Promise被拒绝，失败回调将被调用。无论我们传递给reject的是什么，都将作为参数传递给该回调。

Promise的状态

在上面代码中，我们可以通过调用resolve和reject方法来改变Promise的状态。在继续之前，花点时间看下Promise的生命周期。

Promise的状态会是下面值的其中一种：

pending
fulfilled
rejected
settled

Promise开始时处于pending的状态。这意味着它既没有fulfilled也没有rejected。如果与Promise相关的操作成功（在我们的示例中是远程 API 调用），并且调用了 resolve 方法，那么Promise称为fulfilled。另一方面，如果相关操作不成功，且 reject 方法被调用，则该Promise处于rejected状态。最后，如果Promise处于fulfilled或rejected状态，但不是pending状态，则称为settled。

一旦Promise是rejected或者fulfilled，该状态将永久与之关联。这意味着Promise只能成功或失败一次。如果Promise已经fulfilled，并且在其后附加有两个回调的then()，那么成功回调会直接被调用。因此，在Promise的世界里，我们不关心Promise何时settled。我们只关心Promise的最终结果。

Promise链式调用

有时可能需要将多个异步任务按照特定顺序链在一起。这就是所谓的Promise链式调用。让我们重温一下 setTimeout 示例，以了解Promise链式调用的基本工作原理。

我们可以像以前一样，首先创建一个新的Promise对象：

const promise = new Promise((resolve, reject) => {

  setTimeout(() => { resolve() }, 1000)

});

promise.then(() => {

  console.log(1);

});

不出所料，Promise在一秒后被执行，控制台打印"1"。

为了继续链式调用，我们需要在控制台语句后返回第二个Promise，并将其传递给第二个then：

const promise = new Promise((resolve, reject) => {

  setTimeout(() => { resolve() }, 1000)

});

promise.then(() => {

  console.log(1);

  return new Promise((resolve, reject) => {

    setTimeout(() => { resolve() }, 1000)

  });

}).then(() => {

  console.log(2);

});

虽然这个方法可行，但它已经开始变得有点笨重。让我们创建一个返回新Promise的函数，并在特定时间后解析该Promise：

function sleep(ms) {

  return new Promise(resolve => setTimeout(resolve, ms));

}

然后，我们可以使用它来扁平化嵌套代码：

sleep(1000)

  .then(() => {

    console.log(1);

    return sleep(1000);

  }).then(() => {

    console.log(2);

    return sleep(1000);

  }).then(() => {

    console.log(3);

    return sleep(1000);

  })

  ...

由于 then 方法本身返回一个 Promise 对象，并且我们不会从一个异步操作传递任何值到下一个异步操作，这使得我们能够进一步简化事情：

sleep(1000)

  .then(() => console.log(1))

  .then(() => sleep(1000))

  .then(() => console.log(2))

  .then(() => sleep(1000))

  .then(() => console.log(3))

  ...

这比原始代码要优雅得多。

请注意，如果你想了解更多有关使用JavaScript实现一个sleep函数，你可能对这篇文章感兴趣。

向下传递数据

当我们需要执行多个异步操作时，我们可能希望将一个异步调用的结果传递给Promise链中的下一个then，这样我们就可以对该数据进行处理。

例如，我们可能想要获取 GitHub 仓库的贡献者列表，然后使用该信息获取第一位贡献者的姓名：

fetch('<https://api.github.com/repos/eslint/eslint/contributors>')

  .then(res => res.json())

  .then(json => {

    const firstContributor = json[0].login;

    return fetch(`https://api.github.com/users/${firstContributor}`)

  })

  .then(res => res.json())

  .then(json => console.log(`The first contributor to ESLint was ${json.name}`));

// The first contributor to ESLint was Nicholas C. Zakas

正如我们看到的，通过返回从第二个 fetch 调用返回的Promise，服务器的响应 (res) 在下面的 then 中可用。

Promise错误处理

我们已经知道，then函数接收两个回调函数作为参数，并且如果Promise被拒绝，第二个参数会被调用：

promise.then((data) => {

  console.log('Got data! Promise fulfilled.');

  ...

}, (error) => {

  console.error('Promise rejected.');

  console.error(error.message);

});

然而，为每个Promise指定错误处理函数是相当繁琐的，尤其是处理Promise链式调用的时候。幸运的是，还有更好的方式。

catch方法

我们还可以使用catch方法，它可以为我们处理错误。当一个Promise在Promise链的任何地方rejected时，控制会跳转到最近的拒绝处理函数中。这非常方便，因为它意味着我们可以在链的末尾添加一个catch，让它来处理发生的任何错误。

让我们以前面的代码为例：

fetch('<https://api.github.com/repos/eslint/eslint/contributors>')

  .then(res => res.json())

  .then(json => {

    const firstContributor = json[0].login;

    return fetch(`https://api.github.com/users/${firstContributor}`)

  })

  .then(res => res.jsn())

  .then(json => console.log(`The top contributor to ESLint wass ${json.name}`))

  .catch(error => console.log(error));

注意，除了在代码块的末尾添加错误处理函数之外，我还在第7行将res.json()拼错为res.jsn()。

现在运行代码，会在屏幕上看到下面的输出：

TypeError: res.jsn is not a function

  <anonymous>  <http://0.0.0.0:8000/index.js:7>

  promise callback*  <http://0.0.0.0:8000/index.js:7>  

index.js:9:27

我正在运行的文件名为index.js。第7行包含错误，第9行是捕获错误的catch块。

finally方法

Promise.finally方法在Promise settled后运行，也就是resolved或者rejected。与catch一样，该方法有助于防止代码重复，并且在执行清理任务时非常有用，例如关闭数据库连接或从UI中移除加载动画。

下面是一个使用我们之前代码的示例：

function getFirstContributor(org, repo) {

  showLoadingSpinner();

  fetch(`https://api.github.com/repos/${org}/${repo}/contributors`)

  .then(res => res.json())

  .then(json => {

    const firstContributor = json[0].login;

    return fetch(`https://api.github.com/users/${firstContributor}`)

  })

  .then(res => res.json())

  .then(json => console.log(`The first contributor to ${repo} was ${json.name}`))

  .catch(error => console.log(error))

  .finally(() => hideLoadingSpinner());

};

getFirstContributor('facebook', 'react');

它不接收任何参数并返回一个Promise，因此我们可以在它的返回值上链式调用更多的then、catch和finally调用。

应该使用哪个

到目前为止，我们已经了解了回调和Promise，但值得一提的还有较新的async ... await语法。虽然它实际上只是Promise之上的语法糖，但在很多情况下，它可以让基于Promise的代码更容易阅读和理解。

例如，我们可以这样重写之前的代码：

async function getFirstContributor(org, repo) {

  showLoadingSpinner();

  try {

    const res1 = await  fetch(`https://apiy.github.com/repos/${org}/${repo}/contributors`);

    const contributors = await res1.json();

    const firstContributor = contributors[0].login;

    const res2 = await fetch(`https://api.github.com/users/${firstContributor}`)

    const details = await res2.json();

    console.log(`The first contributor to ${repo} was ${details.name}`);

  } catch (error) {

    console.error(error)

  } finally {

    hideLoadingSpinner();

  }

}

getFirstContributor('facebook', 'react');

正如我们所看到的，我们使用try ... catch语法来处理错误，并且我们可以在finally块中进行任何修整。

我发现上述代码比基于Promise的版本更容易解析。不过，我鼓励你熟悉async ... await语法，看看哪种最适合你。

总结

在本文中，我们了解了如何创建和使用 JavaScript Promise。我们学习了如何创建一个Promise链，并将数据从一个异步操作传递到下一个异步操作。我们还研究了错误处理以及各种Promise实用方法。

如上所述，下一步应该是开始学习async ...await，加深对JavaScript程序内部流程控制的理解。

以上就是本文的全部内容。如果对你有所帮助，欢迎点赞、收藏、转发~