ES6 promise使用说明书：从入门到精通

前端

2023-12-21 05:49:27

前言

在现代JavaScript开发中，Promise已被广泛应用于异步编程，用以解决回调地狱，简化代码结构，提高开发效率。
作为JavaScript ES6标准的一部分，Promise的学习与理解，对提高开发能力非常有帮助。

本文将对ES6 Promise进行详细的介绍，以帮助读者对Promise有一个全面的了解，并能够在实践中熟练应用它。

什么是ES6 Promise

Promise在字面意义上，意为“承诺”。它是一个对象，表示异步操作的最终完成（即“决议”）或失败（即“拒绝”）状态。使用Promise，我们可以更方便地处理异步操作，并避免回调地狱。

Promise的基本用法

一个Promise实例包含三个状态：等待（pending）、成功（fulfilled）和失败（rejected）。

当一个Promise被创建时，它处于等待状态。当异步操作完成时，它将转变为成功或失败状态。

我们可以使用then方法来添加回调函数，以便在Promise被决议或拒绝时执行。

then方法接受两个参数：onFulfilled和onRejected。当Promise被决议时，onFulfilled将被调用；当Promise被拒绝时，onRejected将被调用。

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

promise.then(
  (result) => {
    console.log(result); // 输出：成功
  },
  (error) => {
    console.log(error); // 输出：失败
  }
);

Promise的常用方法

除了then方法外，Promise还提供了许多其他有用的方法。

`catch`方法

catch方法用于处理Promise被拒绝的情况。它接受一个参数：onRejected。当Promise被拒绝时，onRejected将被调用。

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

promise.catch((error) => {
  console.log(error); // 输出：失败
});

`finally`方法

finally方法用于在Promise被决议或拒绝后执行指定的回调函数。它不接受任何参数。

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

promise.finally(() => {
  console.log('无论成功或失败，我都会被执行');
});

`all`方法

all方法用于等待多个Promise同时完成。它接受一个Promise数组作为参数，并返回一个新的Promise。当所有Promise都完成时，新的Promise将被决议。如果其中任何一个Promise被拒绝，新的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((results) => {
  console.log(results); // 输出：[ '成功1', '成功2' ]
});

`race`方法

race方法用于等待多个Promise中第一个完成的。它接受一个Promise数组作为参数，并返回一个新的Promise。当第一个Promise完成时，新的Promise将被决议或拒绝。

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

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

Promise.race([promise1, promise2]).then((result) => {
  console.log(result); // 输出：成功1
});