ES6中的Promise异步实践详解-JavaScript中文网-JavaScript教程资源分享门户

什么是Promise？

Promise是ES6中新增的一种处理异步操作的机制，它是一种异步编程的解决方案。Promise可以将异步操作以同步的方式来处理，让我们更加方便地处理异步操作。

Promise有三种状态：Pending（进行中）、Resolved（已完成）和Rejected（已失败）。当异步操作还在进行中时，Promise的状态为Pending；当异步操作完成时，Promise的状态会变成Resolved，同时会将异步操作的结果传递给then方法；当异步操作失败时，Promise的状态会变成Rejected，同时会将错误信息传递给catch方法。

Promise的基本用法

创建一个Promise对象的方法如下：

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (异步操作成功) {
    resolve(异步操作结果);
  } else {
    reject(错误信息);
  }
});

Promise的构造函数接受一个函数作为参数，这个函数有两个参数：resolve和reject。resolve用于将Promise的状态变成Resolved，并将异步操作的结果传递给then方法；reject用于将Promise的状态变成Rejected，并将错误信息传递给catch方法。

例如，我们可以使用Promise来实现一个简单的异步操作：

// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, World!');
  }, 1000);
});

promise.then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

这段代码中，我们使用setTimeout模拟了一个异步操作，1秒后将Promise的状态变成Resolved，并将字符串'Hello, World!'传递给then方法。then方法接受一个回调函数作为参数，当Promise的状态变成Resolved时，回调函数会被调用。如果异步操作出现错误，可以使用catch方法来捕获错误信息。

Promise的链式调用

Promise的then方法和catch方法都返回一个新的Promise对象，因此可以使用链式调用的方式来处理多个异步操作。例如：

// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
});

promise.then((result) => {
  console.log(result);
  return result + 1;
}).then((result) => {
  console.log(result);
  return result + 1;
}).then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

这段代码中，我们使用Promise的链式调用来实现了一个简单的计数器。首先，我们使用setTimeout模拟了一个异步操作，1秒后将Promise的状态变成Resolved，并将数字1传递给then方法。然后，我们使用三个then方法分别对数字进行加1操作，最后输出结果。如果出现错误，我们使用catch方法来捕获错误信息。

Promise.all方法

Promise.all方法可以将多个Promise对象合并成一个Promise对象，当所有Promise对象的状态都变成Resolved时，返回的Promise对象的状态才会变成Resolved，并将所有Promise对象的结果传递给then方法。如果有任何一个Promise对象的状态变成Rejected，返回的Promise对象的状态则会变成Rejected，并将错误信息传递给catch方法。

例如，我们可以使用Promise.all方法来实现一个同时获取多个接口数据的操作：

// javascriptcn.com 代码示例
const promise1 = fetch('/api/data1');
const promise2 = fetch('/api/data2');
const promise3 = fetch('/api/data3');

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log(results[0]);
    console.log(results[1]);
    console.log(results[2]);
  }).catch((error) => {
    console.error(error);
  });

这段代码中，我们使用fetch方法获取了三个接口的数据，然后使用Promise.all方法将三个Promise对象合并成一个Promise对象，并在所有Promise对象的状态都变成Resolved时输出结果。如果出现错误，我们使用catch方法来捕获错误信息。

Promise.race方法

Promise.race方法可以将多个Promise对象合并成一个Promise对象，当任何一个Promise对象的状态变成Resolved或Rejected时，返回的Promise对象的状态就会变成相应的状态，并将相应的结果或错误信息传递给then方法或catch方法。

例如，我们可以使用Promise.race方法来实现一个超时操作：

// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, World!');
  }, 2000);
});

Promise.race([
  promise,
  new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Timeout'));
    }, 1000);
  })
]).then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

这段代码中，我们使用Promise.race方法将一个Promise对象和一个超时Promise对象合并成一个Promise对象，当两个Promise对象中任何一个的状态变成Resolved或Rejected时，返回的Promise对象的状态就会变成相应的状态，并将相应的结果或错误信息传递给then方法或catch方法。在这个例子中，我们使用setTimeout模拟了一个2秒钟的异步操作，同时设置了一个1秒钟的超时操作，当异步操作完成时，输出结果；当超时操作完成时，输出错误信息。

总结

Promise是一种处理异步操作的机制，它可以让我们以同步的方式来处理异步操作，更加方便地处理异步操作。Promise有三种状态：Pending、Resolved和Rejected。Promise的then方法和catch方法都返回一个新的Promise对象，因此可以使用链式调用的方式来处理多个异步操作。Promise.all方法可以将多个Promise对象合并成一个Promise对象，当所有Promise对象的状态都变成Resolved时，返回的Promise对象的状态才会变成Resolved，并将所有Promise对象的结果传递给then方法。Promise.race方法可以将多个Promise对象合并成一个Promise对象，当任何一个Promise对象的状态变成Resolved或Rejected时，返回的Promise对象的状态就会变成相应的状态，并将相应的结果或错误信息传递给then方法或catch方法。

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