ES6之Promise对象

最新推荐文章于 2025-01-11 22:45:26 发布

转载最新推荐文章于 2025-01-11 22:45:26 发布 · 236 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://es6.ruanyifeng.com/#docs/promise

收录于

JavaScript

es6

本文深入解析Promise对象的工作原理，展示其在Ajax请求中的实际应用，包括`.then()`和`.catch()`的使用，以及`finally()`、`Promise.all()`、`Promise.race()`和`Promise.allSettled()`等方法的实践。同时介绍了`Promise.prototype.finally()`的特性。

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

resolve() 状态成功->then()，reject()捕捉错误 ->catch()

一旦状态改变，就不会再变。

用Promise对象实现的 Ajax 操作的例子。

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});

Promise.prototype.finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

finally方法的回调函数不接受任何参数，这意味着没有办法知道，前面的 Promise 状态到底是fulfilled还是rejected。这表明，finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。

Promise.all()用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.all([p1, p2, p3]);

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

Promise.race()只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变.

Promise.allSettled() 只有等到所有这些参数实例都返回结果，不管是fulfilled还是rejected，包装实例才会结束。

const resolved = Promise.resolve(42);
const rejected = Promise.reject(-1);

const allSettledPromise = Promise.allSettled([resolved, rejected]);

allSettledPromise.then(function (results) {
  console.log(results);
});
// [
//    { status: 'fulfilled', value: 42 },
//    { status: 'rejected', reason: -1 }
// ]

Promise.any()

只要参数实例有一个变成fulfilled状态，包装实例就会变成fulfilled状态；

如果所有参数实例都变成rejected状态，包装实例就会变成rejected状态。

const promises = [
  fetch('/endpoint-a').then(() => 'a'),
  fetch('/endpoint-b').then(() => 'b'),
  fetch('/endpoint-c').then(() => 'c'),
];
try {
  const first = await Promise.any(promises);
  console.log(first);
} catch (error) {
  console.log(error);
}

标签

#js