Promise基本原理与方法

基本原理

        Promise是ES6引入的一个新的对象，主要作用是用来解决JS异步机制里，回调机制产生的回调地狱问题，共有三个状态：pending(进行中)，fulilled(成功)，rejected（失败）。状态不受外界的影响，只有异步操作的结果，可以决定当前是哪一种状态。一旦状态改变（从pending变为fulfilled和从pending变为rejected），就不会再变，任何时候都可以得到这个结果。

方法

1.new Promise()   构造函数

        创建一个新的Promise对象。Promise构造函数接受一个执行函数，该函数包含两个参数resolve和reject,分别用于异步操作成功和失败的结果。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

promise1.then((value) => {
  console.log(value);
  // Expected output: "foo"
});

console.log(promise1);
// Expected output: [object Promise]

2.Promise.prototype.then()

        then()方法最多接受两个参数：用于Promise成功和失败情况的回调参数，返回一个Promise对象。

const promise1 = new Promise((resolve, reject) => {
  resolve('Success!');
});

promise1.then((value) => {
  console.log(value);
  // Expected output: "Success!"
});

3.Promise.prototype.catch()

        用于注册在Promise对象拒绝时的回调函数，也可以用来捕获代码一场或出错。

const promise1 = new Promise((resolve, reject) => {
  throw new Error('Uh-oh!');
});

promise1.catch((error) => {
  console.error(error);
});
// Expected output: Error: Uh-oh!

4.Promise.prototype.finally()

        此方法用于指定不管Promise对象最后的状态如何都会执行的操作

function checkMail() {
  return new Promise((resolve, reject) => {
    if (Math.random() > 0.5) {
      resolve('Mail has arrived');
    } else {
      reject(new Error('Failed to arrive'));
    }
  });
}

checkMail()
  .then((mail) => {
    console.log(mail);
  })
  .catch((err) => {
    console.error(err);
  })
  .finally(() => {
    console.log('Experiment completed');
  });

5.Promise.resolve()

        返回一个已被成功解析的Promise对象，可以将一个值转换为Promise。

Promise.resolve("Success").then((result) => {
  console.log(result); // 输出: Success
});

6.Promise.reject()

        返回一个失败的Promise对象。

Promise.reject("Error occurred").catch((error) => {
  console.error(error); // 输出: Error occurred
});

7.Promise.all()

        接收一个Promise数组，只有当数组中的所有Promise都成功解析时，它才会返回一个成功的Promise，如果有任意一个Promise被拒绝，它将返回第一个被拒绝的Promise。

const promise1 = Promise.resolve("First");
const promise2 = Promise.resolve("Second");
const promise3 = Promise.resolve("Third");

Promise.all([promise1, promise2, promise3]).then((results) => {
  console.log(results); // 输出: ["First", "Second", "Third"]
});

8.Promise.allSettled()

        接收一个Promise数组，只有当所有的参数都返回结果，不管是成功或者失败，才会返回一个Promise。

const promise1 = Promise.resolve("Success");
const promise2 = Promise.reject("Error");

Promise.allSettled([promise1, promise2]).then((results) => {
  console.log(results);
  // 输出:
  // [
  //   { status: "fulfilled", value: "Success" },
  //   { status: "rejected", reason: "Error" }
  // ]
});

9.Promise.race()

        接收一个Promise数组，并返回第一个被解析或者被拒绝的Promise结果。

const promise1 = new Promise((resolve) => setTimeout(resolve, 100, "First"));
const promise2 = new Promise((resolve) => setTimeout(resolve, 200, "Second"));

Promise.race([promise1, promise2]).then((result) => {
  console.log(result); // 输出: First
});

10.Promise.any()

        接收一个Promise数组，返回第一个成功解析的Promise，如果所有的Promise都被拒绝，则返回一个Promise。

const promise1 = Promise.reject("Error 1");
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, "First success"));
const promise3 = Promise.reject("Error 2");

Promise.any([promise1, promise2, promise3]).then((result) => {
  console.log(result); // 输出: First success
}).catch((error) => {
  console.error(error);
});

总结

        第1个为构造函数

        第2-4为实例方法

        第5-10为静态方法