初识 Promise 3 态：Promise入门快速手册

2024-01-29 05:29:00

大家好，欢迎来到我的技术博客。今天，我们来聊聊JavaScript中非常重要的一个概念——Promise。Promise，中文译为“承诺”，在JavaScript中，Promise是一个对象，它代表了一个异步操作的最终完成或失败的结果。Promise有三种状态：pending、resolved和rejected。

Promise的三种状态

Pending

当一个Promise对象被创建时，它的状态是pending，表示异步操作尚未完成。在这个状态下，Promise对象有两个方法：

then()：这个方法接受两个参数，分别是成功回调函数和失败回调函数。当异步操作完成后，如果操作成功，则调用成功回调函数，如果操作失败，则调用失败回调函数。
catch()：这个方法只接受一个参数，是一个失败回调函数。当异步操作失败时，调用失败回调函数。

Resolved

当异步操作成功完成时，Promise对象的状态变为resolved，表示操作成功。在这个状态下，Promise对象有两个方法：

then()：这个方法只接受一个参数，是一个成功回调函数。当异步操作完成后，如果操作成功，则调用成功回调函数。
finally()：这个方法接受一个参数，是一个finally回调函数。无论异步操作成功还是失败，都会调用finally回调函数。

Rejected

当异步操作失败时，Promise对象的状态变为rejected，表示操作失败。在这个状态下，Promise对象有两个方法：

catch()：这个方法只接受一个参数，是一个失败回调函数。当异步操作失败时，调用失败回调函数。
finally()：这个方法接受一个参数，是一个finally回调函数。无论异步操作成功还是失败，都会调用finally回调函数。

then()、catch()和finally()方法的使用方法

then()方法

then()方法是Promise对象最重要的一个方法。它允许您在异步操作完成后执行一些操作。then()方法接受两个参数，分别是成功回调函数和失败回调函数。当异步操作完成后，如果操作成功，则调用成功回调函数，如果操作失败，则调用失败回调函数。

const promise = new Promise((resolve, reject) => {
  // 异步操作
});

promise.then(
  (result) => {
    // 成功回调函数
  },
  (error) => {
    // 失败回调函数
  }
);

catch()方法

catch()方法是Promise对象另一个重要的一个方法。它允许您在异步操作失败时执行一些操作。catch()方法只接受一个参数，是一个失败回调函数。当异步操作失败时，调用失败回调函数。

const promise = new Promise((resolve, reject) => {
  // 异步操作
});

promise.catch((error) => {
  // 失败回调函数
});

finally()方法

finally()方法是Promise对象新增的一个方法。它允许您在异步操作完成后，无论操作成功还是失败，都执行一些操作。finally()方法接受一个参数，是一个finally回调函数。无论异步操作成功还是失败，都会调用finally回调函数。

const promise = new Promise((resolve, reject) => {
  // 异步操作
});

promise.finally(() => {
  // finally回调函数
});

Promise.all和Promise.race

Promise.all

Promise.all()方法用于将多个Promise对象组合成一个新的Promise对象。当所有传入的Promise对象都成功完成后，Promise.all()方法返回一个新的Promise对象，该对象的resolve()方法的参数是一个数组，其中包含了所有传入Promise对象成功的返回值。如果任何一个传入的Promise对象失败，Promise.all()方法返回一个新的Promise对象，该对象的reject()方法的参数是第一个失败的Promise对象的失败原因。

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

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

const promise3 = new Promise((resolve, reject) => {
  // 异步操作3
});

Promise.all([promise1, promise2, promise3])
  .then((result) => {
    // 所有Promise对象都成功完成
  })
  .catch((error) => {
    // 任何一个Promise对象失败
  });

Promise.race

Promise.race()方法用于将多个Promise对象组合成一个新的Promise对象。当任何一个传入的Promise对象完成时，Promise.race()方法返回一个新的Promise对象，该对象的resolve()方法的参数是第一个完成的Promise对象的返回值。如果所有传入的Promise对象都失败，Promise.race()方法返回一个新的Promise对象，该对象的reject()方法的参数是第一个失败的Promise对象的失败原因。

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

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

const promise3 = new Promise((resolve, reject) => {
  // 异步操作3
});

Promise.race([promise1, promise2, promise3])
  .then((result) => {
    // 任何一个Promise对象完成
  })
  .catch((error) => {
    // 所有Promise对象都失败
  });

Promise在异步编程和并发编程中的应用

Promise在异步编程和并发编程中非常有用。它可以帮助您轻松地处理异步操作，并实现并发编程。

异步编程

Promise可以帮助您轻松地处理异步操作。您可以使用then()方法在异步操作完成后执行一些操作。例如，您可以使用then()方法在AJAX请求完成后更新网页内容。

const request = new XMLHttpRequest();

request.open('GET', 'https://example.com/api/data');

request.onload = function() {
  if (request.status === 200) {
    const data = JSON.parse(request.responseText);
    // 使用then()方法更新网页内容
    updateWebpage(data);
  }
};

request.send();

并发编程

Promise也可以帮助您实现并发编程。您可以使用Promise.all()方法或Promise.race()方法将多个异步操作组合成一个新的Promise对象。当所有异步操作都完成后，您可以使用then()方法执行一些操作。例如，您可以使用Promise.all()方法并行执行多个AJAX请求，并在所有请求完成后更新网页内容。

const requests = [];

for (let i = 0; i < 10; i++) {
  requests.push(
    new Promise((resolve, reject) => {
      const request = new XMLHttpRequest();

      request.open('GET', `https://example.com/api/data/${i}`);

      request.onload = function() {
        if (request.status === 200) {
          const data = JSON.parse(request.responseText);
          resolve(data);
        } else {
          reject(new Error('请求失败'));
        }
      };

      request.send();
    })
  );
}

Promise.all(requests)
  .then((data) => {
    // 所有请求都成功完成
    updateWebpage(data);
  })
  .catch((error) => {
    // 任何一个请求失败
    console.error(error);
  });