141 - Promise 对象 - Promise 方法 - then 方法的使用

Promise 对象 - Promise 方法 - then 方法的使用

在 JavaScript 中，Promise 是一种处理异步操作的强大工具，它可以帮助我们避免回调地狱，使异步代码的编写和阅读变得更加清晰和简洁。而 then 方法作为 Promise 最常用的方法之一，在处理异步操作的结果时起着至关重要的作用。本文将详细介绍 then 方法的使用。

什么是 Promise

在深入了解 then 方法之前，我们先来简单回顾一下 Promise 是什么。Promise 是一个表示异步操作最终完成或失败，并返回其结果的对象。它有三种状态：

一旦 Promise 的状态从 pending 变为 fulfilled 或 rejected，它的状态就会被固定下来，不会再改变。

then 方法的基本语法

then 方法用于处理 Promise 成功或失败的结果，它接收两个可选参数：一个成功回调函数和一个失败回调函数。基本语法如下：

promise.then(onFulfilled, onRejected);

• onFulfilled：当 Promise 的状态变为 fulfilled 时调用的回调函数，该函数接收 Promise 的成功结果作为参数。
• onRejected：当 Promise 的状态变为 rejected 时调用的回调函数，该函数接收 Promise 的错误信息作为参数。

then 方法的使用示例

处理成功结果

下面是一个简单的示例，演示了如何使用 then 方法处理 Promise 的成功结果：

// 创建一个 Promise 对象
const promise = new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
        resolve('操作成功');
    }, 1000);
});
// 使用 then 方法处理成功结果
promise.then((result) => {
    console.log(result); // 输出: 操作成功
});

在这个示例中，我们创建了一个 Promise 对象，在 1 秒后调用 resolve 函数，将 Promise 的状态变为 fulfilled，并传递一个成功信息。然后使用 then 方法处理这个成功结果，当 Promise 状态变为 fulfilled 时，onFulfilled 回调函数会被调用，将成功信息打印到控制台。

处理失败结果

接下来，我们看一个处理 Promise 失败结果的示例：

// 创建一个 Promise 对象
const promise = new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
        reject(new Error('操作失败'));
    }, 1000);
});
// 使用 then 方法处理失败结果
promise.then(null, (error) => {
    console.error(error.message); // 输出: 操作失败
});

在这个示例中，我们在 1 秒后调用 reject 函数，将 Promise 的状态变为 rejected，并传递一个错误对象。然后使用 then 方法的第二个参数 onRejected 回调函数来处理这个失败结果，将错误信息打印到控制台。

链式调用

then 方法的一个强大之处在于它可以进行链式调用。当 then 方法的回调函数返回一个新的 Promise 对象时，我们可以继续调用下一个 then 方法来处理这个新的 Promise 的结果。示例如下：

// 创建一个 Promise 对象
const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1);
    }, 1000);
});
// 链式调用 then 方法
promise.then((result) => {
    console.log(result); // 输出: 1
    return result + 1;
}).then((newResult) => {
    console.log(newResult); // 输出: 2
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(newResult * 2);
        }, 1000);
    });
}).then((finalResult) => {
    console.log(finalResult); // 输出: 4
});

在这个示例中，第一个 then 方法接收 Promise 的成功结果 1，并将其加 1 后返回。第二个 then 方法接收第一个 then 方法返回的结果 2，并返回一个新的 Promise 对象，在 1 秒后将结果乘以 2。最后一个 then 方法接收第二个 then 方法返回的新 Promise 的结果 4，并将其打印到控制台。

总结

then 方法是 Promise 对象中非常重要的一个方法，它可以帮助我们处理异步操作的成功或失败结果，并且支持链式调用，使我们可以更方便地处理多个异步操作。通过合理使用 then 方法，我们可以避免回调地狱，使异步代码的逻辑更加清晰和易于维护。希望本文对你理解和使用 then 方法有所帮助。