当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptPromise详解与使用方法

JavaScriptPromise详解与使用方法

2026-01-24 12:50:43 0浏览收藏

Promise 是什么：它不是回调，而是异步操作的「状态容器」

Promise 不是语法糖，也不是让代码变短的工具，而是一个有明确生命周期的对象：它代表一个**尚未完成但终将完成（或失败）的操作**。它的核心价值在于把「操作何时完成」和「完成之后做什么」解耦，避免 callback hell。你不能直接读取 Promise 的结果，只能用 .then() 或 await 去响应它的状态变化。

如何创建 Promise：new Promise() 构造函数必须传入执行器函数

创建 Promise 的唯一标准方式是调用 new Promise()，且必须传入一个函数（称为 executor），这个函数会立即执行，并接收两个参数：resolve 和 reject —— 它们是 Promise 内部提供的回调，用于主动改变 Promise 状态。

const myPromise = new Promise((resolve, reject) => {
  // 模拟异步操作，比如网络请求或定时任务
  setTimeout(() => {
    const success = Math.random() > 0.3;
    if (success) {
      resolve("操作成功"); // → Promise 变为 fulfilled
    } else {
      reject(new Error("操作失败")); // → Promise 变为 rejected
    }
  }, 100);
});

resolve 和 reject 只能被调用一次；多次调用后者会被忽略
executor 函数是同步执行的，但内部通常包裹异步逻辑（如 setTimeout、fetch）
不要在 executor 中抛出未捕获错误（如 throw "oops"），这会直接导致 Promise rejected，但堆栈信息可能丢失

如何处理 Promise：.then() / .catch() / .finally() 的分工要清楚

.then() 接收两个可选函数：第一个处理 fulfilled 状态，第二个处理 rejected 状态；但更推荐只传第一个，用 .catch() 统一捕获错误 —— 因为 .then(onFulfilled, onRejected) 中的 onRejected 无法捕获 onFulfilled 内部抛出的错误，而 .catch() 可以。

myPromise
  .then(result => {
    console.log(result); // "操作成功"
    return result.toUpperCase();
  })
  .catch(err => {
    console.error("这里能捕获 executor 中的 reject，也能捕获上面 .then 里的 throw");
  })
  .finally(() => {
    console.log("无论成功失败都会执行，适合清理资源");
  });

.then() 总是返回一个新的 Promise，所以可以链式调用；返回值决定下一个 .then 的输入（普通值 → fulfilled，Promise → 等待其 settle）
.catch() 实际上是 .then(null, rejectionHandler) 的语法糖，但它能穿透整个链捕获任意环节的 rejection
.finally() 不接收参数，也不影响链下游的值或状态，仅用于副作用（如关闭 loading 动画）

async/await 是 Promise 的语法糖，不是替代品

async/await 让 Promise 链写起来像同步代码，但底层完全依赖 Promise。任何 async 函数都隐式返回 Promise，而 await 只能用在 async 函数内，且只能等待 Promise（或 thenable 对象）。

async function fetchUserData() {
  try {
    const res = await fetch("/api/user");
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json();
    return data;
  } catch (err) {
    console.error("fetch 失败或解析失败都会进这里");
    throw err; // 仍会返回 rejected Promise
  }
}