ES8 中的 Promise 串行任务处理

在 JavaScript 中，我们经常需要处理一些异步任务，比如网络请求、文件读取等。在 ES6 中，Promise 成为了处理异步任务的标准方式，它可以让我们更方便地处理异步任务的结果，避免了回调地狱的问题。而在 ES8 中，Promise 又有了新的特性，可以更方便地处理串行任务。

Promise 的串行任务处理

在 ES6 中，Promise 可以通过 then 方法来处理异步任务的结果，也可以通过 Promise.all 方法来处理多个任务的结果。但是，在处理串行任务时，我们需要手动将上一个任务的结果传递给下一个任务，这样就会导致代码变得冗长、难以维护。比如下面的代码：

// javascriptcn.com 代码示例
fetch('https://api.github.com/users')
  .then(response => response.json())
  .then(users => {
    const firstUser = users[0];
    return fetch(`https://api.github.com/users/${firstUser.login}`);
  })
  .then(response => response.json())
  .then(user => {
    console.log(user);
  })
  .catch(error => {
    console.error(error);
  });

这段代码中，我们首先通过 fetch 方法获取 GitHub 用户列表，然后取出第一个用户，并通过 fetch 方法获取该用户的详细信息。在处理第二个任务时，我们需要手动将第一个任务的结果传递给第二个任务，这样会使代码变得复杂。

在 ES8 中，Promise 提供了新的方法 Promise.prototype.then 和 Promise.prototype.catch，它们可以更方便地处理串行任务。我们可以通过 async/await 和 try/catch 的语法糖来使用这些新的方法。比如下面的代码：

// javascriptcn.com 代码示例
(async () => {
  try {
    const response = await fetch('https://api.github.com/users');
    const users = await response.json();
    const firstUser = users[0];
    const userResponse = await fetch(`https://api.github.com/users/${firstUser.login}`);
    const user = await userResponse.json();
    console.log(user);
  } catch (error) {
    console.error(error);
  }
})();

这段代码中，我们使用了 async/await 和 try/catch 的语法糖来处理串行任务。在第一个任务中，我们使用 await 关键字来等待 fetch 方法的结果，然后使用 await 关键字来等待 response.json() 方法的结果。在第二个任务中，我们也是使用 await 关键字来等待 fetch 方法的结果，并使用 await 关键字来等待 response.json() 方法的结果。这样，我们就可以更方便地处理串行任务了。

总结

在 ES8 中，Promise 提供了新的方法 Promise.prototype.then 和 Promise.prototype.catch，它们可以更方便地处理串行任务。我们可以使用 async/await 和 try/catch 的语法糖来使用这些新的方法，从而避免了回调地狱的问题，让代码更加简洁、易于维护。当我们需要处理串行任务时，可以考虑使用这些新的特性。

示例代码

// javascriptcn.com 代码示例
(async () => {
  try {
    const response = await fetch('https://api.github.com/users');
    const users = await response.json();
    const firstUser = users[0];
    const userResponse = await fetch(`https://api.github.com/users/${firstUser.login}`);
    const user = await userResponse.json();
    console.log(user);
  } catch (error) {
    console.error(error);
  }
})();

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657aaec4d2f5e1655d51e580