Promise的2025版

Promise 是 JavaScript 中处理异步操作的一种解决方案,它解决了传统回调函数模式的一些问题。它可以让异步操作的代码更加直观和易于管理。

Promise 的基本概念

Promise 是一个对象,代表一个异步操作的最终完成(或失败)及其结果值。

1. 创建 Promise

js 复制代码
const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 操作成功 */) {
    resolve(value); // 成功,返回value
  } else {
    reject(error); // 失败,返回错误原因
  }
});

2. Promise 状态

Promise 有三种状态:

  • pending(进行中):初始状态
  • fulfilled(已成功):操作成功完成
  • rejected(已失败):操作失败

一旦状态改变(从 pending 到 fulfilled 或 rejected),就不会再变。

3. Promise 的方法

then()

处理 Promise 成功的情况:

javascript 复制代码
promise.then(value => {
  // 处理成功结果
});

catch()

处理 Promise 失败的情况:

javascript 复制代码
promise.catch(error => {
  // 处理错误
});

finally()

无论成功或失败都会执行:

javascript 复制代码
promise.finally(() => {
  // 总是会执行的代码
});

4. 链式调用

Promise 支持链式调用,每个 then() 可以返回一个新的 Promise:

javascript 复制代码
promise
  .then(value1 => {
    // 处理value1
    return newValue; // 可以是普通值或新的Promise
  })
  .then(value2 => {
    // 处理value2
  })
  .catch(error => {
    // 处理链中任何一步的错误
  });

5. Promise 静态方法

Promise.all()

等待所有 Promise 都成功,或有一个失败:

javascript 复制代码
Promise.all([promise1, promise2, promise3])
  .then(values => {
    // values 是所有 Promise 结果的数组
  })
  .catch(error => {
    // 任何一个 Promise 失败时执行
  });

Promise.race()

返回最先完成(成功或失败)的 Promise 结果:

javascript 复制代码
Promise.race([promise1, promise2, promise3])
  .then(value => {
    // 第一个完成的 Promise 的结果
  })
  .catch(error => {
    // 第一个失败的 Promise 的错误
  });

Promise.resolve() 和 Promise.reject()

创建已完成或已拒绝的 Promise:

javascript 复制代码
const resolvedPromise = Promise.resolve(value);
const rejectedPromise = Promise.reject(error);

Promise.allSettled()

等待所有 Promise 都完成(无论成功或失败):

javascript 复制代码
Promise.allSettled([promise1, promise2])
  .then(results => {
    // results 是一个对象数组,每个对象表示对应的 Promise 结果
    // { status: 'fulfilled', value: ... } 或 { status: 'rejected', reason: ... }
  });

6. async/await

ES2017 引入的语法糖,使 Promise 的使用更加简洁:

javascript 复制代码
async function fetchData() {
  try {
    const result = await doSomething();
    const newResult = await doSomethingElse(result);
    const finalResult = await doThirdThing(newResult);
    console.log('Got the final result: ' + finalResult);
    // 处理结果
  } catch (error) {
    // 处理错误
  }
}

此乃 Promise 的核心语法,它为 JavaScript 的异步编程提供了强大而灵活的解决方案。

为什么要使用 Promise?

使用 Promise 有两个主要优势:

1. 指定回调函数的方式更加灵活

传统回调方式:

js 复制代码
createAudioFileAsync(audioSettings, successCallback, failureCallback);

必须在启动异步任务前就指定回调函数。

Promise 方式:

js 复制代码
const promise = createAudioFileAsync(audioSettings);
setTimeout(() => {
  promise.then(successCallback, failureCallback);
}, 3000);

可以在异步任务启动后,甚至在异步任务结束后再指定回调函数。

2. 支持链式调用,解决回调地狱问题

回调地狱示例:

js 复制代码
doSomething(function(result) {
  doSomethingElse(result, function(newResult) {
    doThirdThing(newResult, function(finalResult) {
      console.log('Got the final result: ' + finalResult)
    }, failureCallback)
  }, failureCallback)
}, failureCallback)

promise.then()返回的新promise的结果状态由什么决定?

1. 回调函数的返回值

当 .then() 中的回调函数被执行时,它的返回值会影响新 Promise 的状态:

情况一:返回一个非 Promise 值

javascript 复制代码
promise.then(value => {
  return 42; // 返回普通值
});

新 Promise 将变为 fulfilled 状态,结果值为返回的值(这里是 42)。

情况二:返回一个 Promise 对象

javascript 复制代码
promise.then(value => {
  return new Promise((resolve, reject) => {
    // ...
  });
});

新 Promise 的状态将完全取决于返回的 Promise 的状态:

  • 如果返回的 Promise 变为 fulfilled,新 Promise 也变为 fulfilled,值为返回的 Promise 的结果值
  • 如果返回的 Promise 变为 rejected,新 Promise 也变为 rejected,原因为返回的 Promise 的拒绝原因

情况三:返回一个 thenable 对象

javascript 复制代码
promise.then(value => {
  return { 
    then: function(resolve, reject) { 
      resolve('thenable 结果');
    } 
  };
});

新 Promise 将根据 thenable 对象的 then 方法执行结果来决定状态。

2. 回调函数抛出异常

如果 .then() 中的回调函数抛出异常,新 Promise 将变为 rejected 状态,拒绝原因为抛出的异常:

javascript 复制代码
promise.then(value => {
  throw new Error('发生错误');
});
// 返回的新 Promise 将是 rejected 状态,原因是这个 Error 对象

3. 原 Promise 的状态

.then() 方法中有两个参数,分别对应成功和失败的回调:

javascript 复制代码
promise.then(
  successCallback, // 当原 Promise 为 fulfilled 时调用
  failureCallback  // 当原 Promise 为 rejected 时调用
);
  • 如果原 Promise 变为 fulfilled 状态,则执行 successCallback
  • 如果原 Promise 变为 rejected 状态,则执行 failureCallback
  • 如果没有提供对应状态的回调函数,则状态会"穿透"到下一个 .then()

总结

Promise.then() 返回的新 Promise 的结果状态由以下几点决定:

  1. 回调函数的返回值类型(普通值、Promise 对象或 thenable 对象)
  2. 回调函数是否抛出异常
  3. 原 Promise 的状态(决定执行哪个回调函数) 这种机制使得 Promise 能够实现链式调用,每一步的结果都可以传递给下一步,从而避免了回调地狱问题。

什么是 thenable 对象?

thenable 对象是 JavaScript 中一个特殊的概念,它与 Promise 机制密切相关。

thenable 对象的定义

thenable 对象是指任何定义了 then 方法的对象或函数。更具体地说,它是一个包含 then 方法的对象,该方法接收两个回调函数作为参数(通常命名为 resolvereject),类似于 Promise 的 then 方法。

javascript 复制代码
const thenable = {
  then: function(resolve, reject) {
    // 可以调用 resolve 或 reject
    resolve('成功的结果');
    // 或者
    // reject('失败的原因');
  }
};
相关推荐
光影少年3 天前
Promise状态和方法都有哪些,以及实现原理
javascript·promise·掘金·金石计划
CHANG_THE_WORLD6 天前
C++并发编程指南 std::promise 介绍与使用
java·开发语言·c++·promise
一枚前端小能手15 天前
🔄 Promise又写成回调地狱了?这是咋弄哩
前端·javascript·promise
乔公子搬砖16 天前
小程序开发提效:npm支持、Vant Weapp组件库与API Promise化(八)
前端·javascript·微信小程序·js·promise·vagrant·事件绑定
flyliu19 天前
真的要搞懂Promise的流程啊混蛋
前端·promise
ZzMemory1 个月前
深入理解JS(七):Promise 的底层机制与异步编程全解析
前端·javascript·promise
一个很帅的帅哥1 个月前
Promise
javascript·promise
一个很帅的帅哥1 个月前
Node.js和Javascript中的async和await
javascript·node.js·async·promise·await
前端拿破轮1 个月前
字节面试官:你对Promise很熟是吧?试一下手写所有静态方法
前端·面试·promise
我是哈哈hh2 个月前
【AJAX】XMLHttpRequest、Promise 与 axios的关系
前端·javascript·ajax·xmlhttprequest·promise