JavaScript Promise 详解

Promise 是 JavaScript 中用于异步编程的一种对象。它代表了一个异步操作的最终完成（或失败）及其结果值。

特点

• 状态：一个 Promise 对象代表了一个异步操作，它有三种状态：

  • Pending（进行中）：初始状态，既不是成功，也不是失败状态。
  • Fulfilled（已成功）：意味着操作成功完成。
  • Rejected（已失败）：意味着操作失败。

• 一次性：Promise 对象的状态一旦改变，就不会再变，任何时候都可以得到这个结果。

• 微任务：Promise 的回调函数是在当前执行栈清空后的微任务中执行，不会阻塞代码的执行。

构造函数

Promise 对象是一个构造函数，可以用来创建 Promise 实例。

语法

new Promise(executor)

参数

• executor：一个执行器函数，它将在 Promise 创建后立即执行。它接受两个参数，通常命名为 resolve 和 reject：
  • resolve：当异步操作成功时调用，并且返回操作的结果。
  • reject：当异步操作失败时调用，并且返回操作的错误。

示例

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  const value = "Hello, Promise!";
  if (typeof value === "string") {
    resolve(value);
  } else {
    reject("Value is not a string!");
  }
});

方法

.then()

用于指定 Promise 状态为 fulfilled 时的回调函数。

语法

promise.then(onFulfilled, onRejected)

参数

• onFulfilled：当 Promise 成功时调用的函数。
• onRejected：当 Promise 失败时调用的函数（可选）。

示例

myPromise.then((value) => {
  console.log(value); // "Hello, Promise!"
}, (error) => {
  console.error(error); // "Value is not a string!"
});

.catch()

用于指定 Promise 状态为 rejected 时的回调函数。

语法

promise.catch(onRejected)

参数

• onRejected：当 Promise 失败时调用的函数。

示例

myPromise.catch((error) => {
  console.error(error); // "Value is not a string!"
});

.finally()

用于指定 Promise 状态无论成功还是失败时都会执行的回调函数。

语法

promise.finally(onFinally)

参数

• onFinally：无论 Promise 成功还是失败都会调用的函数。

示例

myPromise.finally(() => {
  console.log("The promise is settled, regardless of the outcome.");
});

链式调用

Promise 的 .then() 和 .catch() 方法都返回一个新的 Promise 对象，这使得可以进行链式调用。

示例

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There was a problem with the fetch operation:', error));

在这个例子中，fetch 返回一个 Promise 对象，它在成功时解析为 JSON，如果任何步骤失败，错误将被 catch 捕获。

静态方法

Promise.all()

接受一个 Promise 对象的数组作为参数，只有当所有 Promise 对象都成功时，才会触发 .then() 回调函数。

语法

Promise.all(promises)

参数

• promises：一个 Promise 对象的数组。

示例

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // [result1, result2, result3]
});

Promise.race()

接受一个 Promise 对象的数组作为参数，只要有一个 Promise 对象成功或失败，就立即触发 .then() 或 .catch() 回调函数。

语法

Promise.race(promises)

参数

• promises：一个 Promise 对象的数组。

示例

Promise.race([promise1, promise2, promise3]).then((value) => {
  console.log(value); // The first promise to settle (either fulfilled or rejected)
});

Promise 对象为 JavaScript 异步编程提供了一种更加清晰和灵活的方式来处理异步操作，使得代码更加易于理解和维护。