Promise状态改变的微妙艺术

2023-11-08 06:22:51

从零开始的Promise（三）

探索Promise状态改变的微妙艺术

引言

在当今以异步编程为主导的时代，掌握Promise的使用技巧至关重要。Promise作为JavaScript中处理异步操作的利器，其状态改变机制一直备受关注。本文将带领您深入Promise状态改变的奥秘，揭示如何改变Promise的状态，如何处理多个成功/失败回调函数，以及Promise状态改变和回调函数执行的先后顺序。准备好踏上Promise状态改变的探索之旅了吗？

一、改变Promise状态的艺术

Promise的状态改变并非一蹴而就，而是需要遵循一定的规则和步骤。让我们首先了解一下Promise的三个状态：

Pending（等待）：这是Promise的初始状态，表示异步操作尚未完成。
Fulfilled（已完成）：表示异步操作已成功完成，并产生了一个结果值。
Rejected（已拒绝）：表示异步操作已失败，并产生了一个错误值。

要改变Promise的状态，需要使用resolve()或reject()方法。resolve()方法用于将Promise的状态从Pending改变为Fulfilled，而reject()方法用于将Promise的状态从Pending改变为Rejected。

例如：

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

promise.then(
  result => console.log(result),
  error => console.log(error)
);

在上面的代码中，我们创建了一个Promise对象，并在其中使用setTimeout()模拟了一个异步操作。如果随机数大于0.5，则使用resolve()方法将Promise的状态改变为Fulfilled，并返回一个"成功！"的结果值。否则，使用reject()方法将Promise的状态改变为Rejected，并返回一个"失败！"的错误值。

然后，我们使用then()方法添加两个回调函数，分别处理成功和失败的情况。当Promise的状态改变为Fulfilled时，则调用第一个回调函数，并传入成功的结果值。当Promise的状态改变为Rejected时，则调用第二个回调函数，并传入失败的错误值。

二、多个回调函数的微妙处理

一个Promise可以指定多个成功或失败回调函数，那么问题来了，当Promise的状态改变时，这些回调函数都会被调用吗？答案是：不一定。

对于成功回调函数，只有当Promise的状态从Pending改变为Fulfilled时，才会被调用。对于失败回调函数，只有当Promise的状态从Pending改变为Rejected时，才会被调用。

也就是说，如果Promise的状态从Fulfilled改变为Rejected，或者从Rejected改变为Fulfilled，则不会调用任何回调函数。

三、状态改变和回调执行的先后顺序

Promise状态改变和回调函数执行的先后顺序也颇为微妙。一般来说，当Promise的状态发生改变时，会先执行状态改变操作，然后再执行回调函数。

但是，如果在Promise的状态发生改变之前，已经添加了回调函数，那么这些回调函数会在状态改变操作之后执行。

例如：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功！');
  }, 1000);
});

promise.then(
  result => console.log(result)
);

setTimeout(() => {
  promise.then(
    result => console.log(result)
  );
}, 500);