返回

Promise 原理(二):详解 then 的实现

前端

Promise 概述

Promise 是 JavaScript 中用于处理异步操作的强大工具。它提供了一种优雅的方式来处理异步操作的结果,并避免了传统的回调函数带来的“回调地狱”。在上一篇文章中,我们了解了 Promise 的基本概念,包括状态、值和执行器。现在,我们将深入探讨 then 方法的实现原理,看看它如何帮助我们处理异步操作的结果。

then 方法

then 方法是 Promise 的一个重要方法,它允许我们在 Promise 对象上添加回调函数。当 Promise 的状态发生改变时,这些回调函数就会被调用。then 方法接收两个参数,分别是成功回调函数和失败回调函数。当 Promise 的状态变为 fulfilled 时,成功回调函数会被调用,并将 Promise 的值作为参数传递给该函数。当 Promise 的状态变为 rejected 时,失败回调函数会被调用,并将 Promise 的错误原因作为参数传递给该函数。

then 方法的实现

then 方法的实现原理相对简单。它首先创建一个新的 Promise 对象,称为 thenPromise。然后,它将成功回调函数和失败回调函数分别添加到 thenPromise 的成功回调函数队列和失败回调函数队列中。当 Promise 的状态发生改变时,thenPromise 的状态也会随之改变。如果 Promise 的状态变为 fulfilled,那么 thenPromise 的状态也会变为 fulfilled,并且 thenPromise 的成功回调函数队列中的所有回调函数都会被调用。如果 Promise 的状态变为 rejected,那么 thenPromise 的状态也会变为 rejected,并且 thenPromise 的失败回调函数队列中的所有回调函数都会被调用。

then 方法的使用

then 方法的使用非常简单。我们只需要在 Promise 对象上调用 then 方法,并传入成功回调函数和失败回调函数即可。例如,以下代码演示了如何使用 then 方法来处理异步操作的结果:

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

promise.then((result) => {
  console.log(result); // 输出:成功
}, (error) => {
  console.log(error); // 不会被执行
});

在上面的代码中,我们首先创建了一个 Promise 对象,并在其中使用了 setTimeout 函数来模拟一个异步操作。然后,我们调用 then 方法来处理异步操作的结果。如果异步操作成功,那么成功回调函数就会被调用,并输出“成功”;如果异步操作失败,那么失败回调函数就会被调用,但由于我们没有在 reject 中传递错误原因,所以失败回调函数不会被执行。

总结

then 方法是 Promise 的一个重要方法,它允许我们在 Promise 对象上添加回调函数,以便在 Promise 的状态发生改变时执行相应的操作。then 方法的实现原理相对简单,它通过创建一个新的 Promise 对象并将其与原始 Promise 对象的状态关联起来,从而实现了异步操作结果的处理。then 方法的使用非常简单,我们只需要在 Promise 对象上调用 then 方法,并传入成功回调函数和失败回调函数即可。