Promise 一看就懂的代码实现超级详解！

作为一名合格的javascript程序员，掌握Promise是必备的技能。Promise可以帮助我们轻松管理异步任务，让我们从回调地狱中解放出来。本文将带你一步步了解Promise的实现，从最核心的状态管理到各种静态函数，我们都会一一分解。

Promise状态管理

Promise有三种状态：pending、fulfilled和rejected。pending表示Promise尚未完成，fulfilled表示Promise已成功完成，rejected表示Promise已失败。

我们可以使用then方法来处理Promise的状态。then方法接受两个参数，第一个参数是fulfilled时的回调函数，第二个参数是rejected时的回调函数。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    if (success) {
      resolve(result);
    } else {
      reject(error);
    }
  }, 1000);
});

promise.then((result) => {
  // Promise成功时执行
}, (error) => {
  // Promise失败时执行
});

then的链式调用

then方法可以连续调用，形成链式调用。链式调用可以让我们的代码更加简洁和可读。

promise
  .then((result) => {
    return result + 1;
  })
  .then((result) => {
    return result * 2;
  })
  .then((result) => {
    console.log(result); // 输出: 6
  });

异步逻辑添加

Promise可以轻松地添加异步逻辑。我们可以使用then方法来添加异步逻辑，也可以使用Promise.all和Promise.race来同时处理多个异步任务。

// Promise.all
const promises = [
  Promise.resolve(1),
  Promise.resolve(2),
  Promise.resolve(3),
];

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

// Promise.race
const promises = [
  Promise.resolve(1),
  Promise.reject(2),
  Promise.resolve(3),
];

Promise.race(promises).then((result) => {
  console.log(result); // 输出: 1
}, (error) => {
  console.log(error); // 不会执行
});

错误捕获

Promise可以轻松地捕获错误。我们可以使用then方法的第二个参数来捕获错误。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    if (success) {
      resolve(result);
    } else {
      reject(error);
    }
  }, 1000);
});

promise.then((result) => {
  // Promise成功时执行
}, (error) => {
  // Promise失败时执行
});

Promise.all

Promise.all方法可以同时处理多个异步任务。当所有异步任务都完成时，Promise.all方法会返回一个包含所有结果的数组。

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

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

Promise.race

Promise.race方法可以同时处理多个异步任务。当第一个异步任务完成时，Promise.race方法会立即返回该任务的结果。

const promises = [
  Promise.resolve(1),
  Promise.reject(2),
  Promise.resolve(3),
];

Promise.race(promises).then((result) => {
  console.log(result); // 输出: 1
}, (error) => {
  console.log(error); // 不会执行
});

Promise.resolve

Promise.resolve方法可以将一个值包装成一个Promise对象。

const promise = Promise.resolve(1);

promise.then((result) => {
  console.log(result); // 输出: 1
});

Promise.finally

Promise.finally方法可以在Promise完成后执行一些操作，无论Promise是成功还是失败。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    if (success) {
      resolve(result);
    } else {
      reject(error);
    }
  }, 1000);
});

promise.finally(() => {
  // Promise完成后执行的操作
});