如何使用 Promise？请解释 then()、catch() 和 finally() 方法的作用。

推荐答案

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

• then() 方法：

  • 用于指定 Promise 对象成功（fulfilled）时的回调函数。
  • 接收两个可选参数：第一个参数是 onFulfilled 函数（Promise 成功时执行），第二个参数是 onRejected 函数（Promise 失败时执行，等同于 catch()）。
  • 返回一个新的 Promise 对象，允许链式调用。

• catch() 方法：

  • 用于指定 Promise 对象失败（rejected）时的回调函数。
  • 等同于 then(null, onRejected) 的语法糖。
  • 返回一个新的 Promise 对象，允许链式调用。

• finally() 方法：

  • 用于指定 Promise 对象无论成功还是失败都会执行的回调函数。
  • 不接收参数，因为无法得知 Promise 的最终状态。
  • 主要用于执行清理操作，比如关闭加载指示器。
  • 返回一个新的 Promise 对象，但是其状态和值与原始 Promise 保持一致，传递到下一个 then() 或 catch() 中。

本题详细解读

Promise 的基本概念

Promise 是一种处理异步操作的机制，它有三种状态：

1. pending (等待)： 初始状态，既不是 fulfilled 也不是 rejected。
2. fulfilled (已完成)： 异步操作成功完成。
3. rejected (已拒绝)： 异步操作失败。

Promise 实例一旦从 pending 状态变为 fulfilled 或者 rejected，就不能再改变状态。

then() 方法详解

then() 方法接收两个回调函数：onFulfilled 和 onRejected。

• onFulfilled(value)： 当 Promise 状态变为 fulfilled 时执行，value 参数是 Promise 成功的结果。
• onRejected(reason)： 当 Promise 状态变为 rejected 时执行，reason 参数是 Promise 失败的原因。

then() 方法返回一个新的 Promise 对象。这意味着可以使用链式调用，例如：

// www.javascriptcn.com code example
new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("操作成功");
  }, 1000);
})
  .then((result) => {
    console.log("then1:", result); // 输出: then1: 操作成功
    return "处理后的结果";
  })
  .then((result) => {
    console.log("then2:", result); // 输出: then2: 处理后的结果
  })

如果 onFulfilled 或 onRejected 返回的是 Promise 对象，那么下一个 then() 方法会在这个返回的 Promise 对象变为 fulfilled 或 rejected 状态时执行。

catch() 方法详解

catch(onRejected) 方法是 then(null, onRejected) 的语法糖，它只处理 Promise 的 rejected 状态。可以使用它来捕获 promise 链中的任何错误。例如：

// www.javascriptcn.com code example
new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("操作失败");
  }, 1000);
})
  .then((result) => {
    console.log("不会执行", result);
  })
  .catch((error) => {
    console.log("catch:", error); // 输出: catch: 操作失败
  });

catch() 返回的也是一个新的 Promise，所以也支持链式调用。

finally() 方法详解

finally(callback) 方法指定无论 Promise 成功（fulfilled）还是失败（rejected）都会执行的回调函数。finally() 不接收任何参数，也无法得知 Promise 的状态。

finally() 主要用于执行清理操作，例如：

// www.javascriptcn.com code example
let loading = true;

function fetchData(){
    loading = true;
    console.log("加载中...");
    return new Promise((resolve,reject) =>{
        setTimeout(()=>{
            const success = Math.random() > 0.5;
            if(success) resolve("数据加载成功");
            else reject("数据加载失败");
        },1000)
    })
}

fetchData()
    .then(data=>{
        console.log(data)
    })
    .catch(error =>{
        console.log(error)
    })
    .finally(()=>{
        loading = false;
        console.log("加载结束");
    })

finally() 方法会始终执行，无论 fetchData 的结果如何， loading 都会设置为 false。

总结

（本题无需总结，因为题目要求结尾不要有总结）