小白也能懂的 Promise 入门教程

什么是 Promise？

Promise 是 JavaScript 中用来处理异步操作的一种解决方案。它可以让我们更优雅地处理异步代码，避免回调地狱，提高代码可读性和可维护性。

Promise 的三种状态

Promise 有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

当 Promise 还在进行中时，它的状态是 pending，此时 Promise 还没有得到结果。

当 Promise 成功完成时，它的状态变为 fulfilled，并返回一个值。

当 Promise 失败时，它的状态变为 rejected，并返回一个错误信息。

Promise 的基本用法

Promise 的基本用法是通过 new Promise() 创建一个 Promise 对象，然后在 Promise 对象内部进行异步操作。在异步操作完成后，通过调用 resolve() 或 reject() 方法将 Promise 对象的状态设置为 fulfilled 或 rejected。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const random = Math.random();
    if (random > 0.5) {
      resolve('成功');
    } else {
      reject('失败');
    }
  }, 1000);
});

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

上面的代码中，我们通过 new Promise() 创建了一个 Promise 对象，然后在异步操作中模拟了一个随机的结果，当结果大于 0.5 时，调用 resolve() 方法设置 Promise 对象的状态为 fulfilled，否则调用 reject() 方法设置 Promise 对象的状态为 rejected。

在 Promise 对象中，我们通过 then() 方法和 catch() 方法来处理 Promise 对象的状态变化。当 Promise 对象的状态变为 fulfilled 时，then() 方法会被调用，传入的参数是异步操作的结果；当 Promise 对象的状态变为 rejected 时，catch() 方法会被调用，传入的参数是错误信息。

Promise 的链式调用

Promise 还支持链式调用，我们可以在 then() 方法中返回一个新的 Promise 对象，这个新的 Promise 对象可以继续进行异步操作，然后再返回一个新的 Promise 对象，以此类推。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const random = Math.random();
    if (random > 0.5) {
      resolve('成功');
    } else {
      reject('失败');
    }
  }, 1000);
});

promise.then((value) => {
  console.log(value);
  return new Promise((resolve, reject) => {
    // 异步操作
    setTimeout(() => {
      const random = Math.random();
      if (random > 0.5) {
        resolve('成功2');
      } else {
        reject('失败2');
      }
    }, 1000);
  });
}).then((value) => {
  console.log(value);
}).catch((error) => {
  console.log(error);
});

上面的代码中，我们在第一个 then() 方法中返回了一个新的 Promise 对象，这个新的 Promise 对象进行了第二个异步操作。当第二个异步操作完成时，第二个 then() 方法会被调用，传入的参数是第二个异步操作的结果。

Promise.all() 和 Promise.race()

Promise 还提供了两个静态方法：Promise.all() 和 Promise.race()。

Promise.all() 接收一个 Promise 对象数组作为参数，当数组中所有的 Promise 对象都变为 fulfilled 时，Promise.all() 返回一个新的 Promise 对象，传入的参数是一个包含所有 Promise 对象结果的数组；当数组中有一个 Promise 对象变为 rejected 时，Promise.all() 返回一个 rejected 状态的 Promise 对象，传入的参数是第一个变为 rejected 状态的 Promise 对象的错误信息。

const promise1 = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve('成功1');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve('成功2');
  }, 2000);
});

Promise.all([promise1, promise2]).then((values) => {
  console.log(values);
}).catch((error) => {
  console.log(error);
});

上面的代码中，我们将两个 Promise 对象放入 Promise.all() 中，当两个 Promise 对象都变为 fulfilled 时，Promise.all() 返回一个新的 Promise 对象，传入的参数是一个包含两个 Promise 对象结果的数组。

Promise.race() 接收一个 Promise 对象数组作为参数，当数组中有一个 Promise 对象变为 fulfilled 或 rejected 时，Promise.race() 返回一个新的 Promise 对象，传入的参数是第一个变为 fulfilled 或 rejected 状态的 Promise 对象的结果或错误信息。

const promise1 = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve('成功1');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    reject('失败2');
  }, 2000);
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
}).catch((error) => {
  console.log(error);
});

上面的代码中，我们将两个 Promise 对象放入 Promise.race() 中，当两个 Promise 对象中有一个变为 fulfilled 或 rejected 时，Promise.race() 返回一个新的 Promise 对象，传入的参数是第一个变为 fulfilled 或 rejected 状态的 Promise 对象的结果或错误信息。

总结

Promise 是一种用来处理异步操作的解决方案，它可以让我们更优雅地处理异步代码，避免回调地狱，提高代码可读性和可维护性。Promise 有三种状态：pending、fulfilled 和 rejected。Promise 还支持链式调用、Promise.all() 和 Promise.race()。我们可以根据具体的业务需求选择相应的使用方法。

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