Promise全家桶：then()、resolve()、reject()、all()、race()大揭秘

2024-02-16 16:42:21

一、揭秘Promise的秘密：

1. then()方法：

then()方法是Promise对象最重要的组成部分之一。它允许您在Promise对象被解析（resolved）或拒绝（rejected）时执行特定的回调函数。

语法：

then(onFulfilled, onRejected);

onFulfilled： 当Promise对象被解析时执行的回调函数。
onRejected： 当Promise对象被拒绝时执行的回调函数。

示例：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Promise resolved!");
  }, 3000);
});

promise.then(
  (result) => {
    console.log(result); // 输出："Promise resolved!"
  },
  (error) => {
    console.log(error); // 不会执行，因为Promise对象被解析了
  }
);

在上面的示例中，我们创建了一个新的Promise对象，并在3秒后使用resolve()方法将其解析。然后，我们使用then()方法添加两个回调函数，分别用于处理解析和拒绝的情况。当Promise对象被解析时，第一个回调函数被执行，并在控制台输出"Promise resolved!"。由于Promise对象被解析了，所以第二个回调函数不会被执行。

2. resolve()方法：

resolve()方法用于将Promise对象的状态从pending变为resolved。当Promise对象被解析时，then()方法中处理解析的回调函数就会被执行。

语法：

resolve(value);

value： 传递给then()方法处理解析的回调函数的值。

示例：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Promise resolved!");
  }, 3000);
});

promise.then(
  (result) => {
    console.log(result); // 输出："Promise resolved!"
  }
);

// 调用resolve()方法将Promise对象的状态变为resolved
resolve("Promise resolved!");

在上面的示例中，我们创建了一个新的Promise对象，并在3秒后使用resolve()方法将其解析。然后，我们使用then()方法添加一个回调函数，用于处理解析的情况。当resolve()方法被调用时，Promise对象的状态从pending变为resolved，then()方法中处理解析的回调函数被执行，并在控制台输出"Promise resolved!"。

3. reject()方法：

reject()方法用于将Promise对象的状态从pending变为rejected。当Promise对象被拒绝时，then()方法中处理拒绝的回调函数就会被执行。

语法：

reject(reason);

reason： 传递给then()方法处理拒绝的回调函数的错误信息。

示例：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error("Promise rejected!"));
  }, 3000);
});

promise.then(
  (result) => {
    console.log(result); // 不会执行，因为Promise对象被拒绝了
  },
  (error) => {
    console.log(error.message); // 输出："Promise rejected!"
  }
);

// 调用reject()方法将Promise对象的状态变为rejected
reject(new Error("Promise rejected!"));

在上面的示例中，我们创建了一个新的Promise对象，并在3秒后使用reject()方法将其拒绝。然后，我们使用then()方法添加两个回调函数，分别用于处理解析和拒绝的情况。当reject()方法被调用时，Promise对象的状态从pending变为rejected，then()方法中处理拒绝的回调函数被执行，并在控制台输出"Promise rejected!"。

4. all()方法：

all()方法用于同时处理多个Promise对象。它接受一个Promise对象数组作为参数，并返回一个新的Promise对象。当所有传入的Promise对象都被解析时，新的Promise对象被解析，并以一个包含所有Promise对象解析结果的数组作为参数传递给then()方法处理解析的回调函数。如果其中任何一个Promise对象被拒绝，新的Promise对象立即被拒绝，并以第一个被拒绝的Promise对象的原因作为参数传递给then()方法处理拒绝的回调函数。

语法：

all(promises);

promises： 一个包含多个Promise对象的数组。

示例：

const promises = [
  Promise.resolve("Promise 1 resolved!"),
  Promise.resolve("Promise 2 resolved!"),
  Promise.resolve("Promise 3 resolved!")
];

Promise.all(promises).then(
  (results) => {
    console.log(results); // 输出：["Promise 1 resolved!", "Promise 2 resolved!", "Promise 3 resolved!"]
  }
);

在上面的示例中，我们创建了一个包含三个Promise对象的数组，并使用all()方法将其作为参数传递给Promise.all()。当所有三个Promise对象都被解析时，新的Promise对象被解析，并以一个包含所有Promise对象解析结果的数组作为参数传递给then()方法处理解析的回调函数。在控制台输出结果如下：

["Promise 1 resolved!", "Promise 2 resolved!", "Promise 3 resolved!"]

5. race()方法：

race()方法用于获取最快解析或拒绝的Promise对象的结果。它接受一个Promise对象数组作为参数，并返回一个新的Promise对象。当传入的Promise对象数组中任意一个被解析或拒绝时，新的Promise对象立即被解析或拒绝，并以最快解析或拒绝的Promise对象的结果作为参数传递给then()方法处理解析或拒绝的回调函数。

语法：

race(promises);

promises： 一个包含多个Promise对象的数组。

示例：

const promises = [
  Promise.resolve("Promise 1 resolved!"),
  Promise.reject(new Error("Promise 2 rejected!")),
  Promise.resolve("Promise 3 resolved!")
];

Promise.race(promises).then(
  (result) => {
    console.log(result); // 输出："Promise 1 resolved!"
  },
  (error) => {
    console.log(error.message); // 不会执行，因为最快解析的Promise对象没有被拒绝
  }
);

在上面的示例中，我们创建了一个包含三个Promise对象的数组，并使用race()方法将其作为参数传递给Promise.race()。当最快的Promise对象（Promise 1）被解析时，新的Promise对象立即被解析，并以Promise 1的解析结果作为参数传递给then()方法处理解析的回调函数。在控制台输出结果如下：

Promise 1 resolved!

二、实战演练：

1. 使用then()方法处理异步操作：

const fetchUserData = (userId) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = {
        id: userId,
        name: "John Doe",
      };

      resolve(user);
    }, 3000);
  });
};

fetchUserData(1).then(
  (user) => {
    console.log(user); // 输出：{ id: 1, name: "John Doe" }
  }
);

在上面的示例中，我们创建了一个名为fetchUserData()的函数，该函数接受一个用户ID作为参数，并返回一个Promise对象。在Promise对象内部，我们使用setTimeout()模拟一个异步操作，并在3秒后使用resolve()方法将其解析，并将用户信息作为参数传递给then()方法处理解析的回调函数。当Promise对象被解析时，then()方法中处理解析的回调函数被执行，并在控制台输出用户信息。

2. 使用all()方法处理多个异步操作：

const fetchUserNames = (userIds) => {
  return Promise.all(
    userIds.map((userId) => {
      return fetchUserData(userId);
    })
  );
};

fetchUserNames([1, 2, 3]).then(
  (users) => {
    console.log(users); // 输出：[ { id: 1, name: "John Doe" }, { id: 2, name: "Jane Doe" }, { id: 3, name: "Tom Doe" } ]
  }
);