登录
首页 >  文章 >  前端

JavaScriptPromise详解与使用方法

时间:2026-01-02 20:45:46 170浏览 收藏

今日不肯埋头,明日何以抬头!每日一句努力自己的话哈哈~哈喽,今天我将给大家带来一篇《JavaScript Promise是什么?如何使用?》,主要内容是讲解等等,感兴趣的朋友可以收藏或者有更好的建议在评论提出,我都会认真看的!大家一起进步,一起学习!

Promise 是 JavaScript 处理异步操作的标准对象,代表未来完成或失败的操作,具有 pending、fulfilled、rejected 三种不可逆状态;通过 new Promise() 创建,支持链式调用(.then/.catch)、静态方法(all/race/resolve/reject)及 async/await 语法。

javascript Promise是什么_如何使用它

Promise 是 JavaScript 中处理异步操作的标准化对象,它代表一个**尚未完成但未来会完成(或失败)的操作**,让你能以更清晰、可链式的方式管理回调,避免“回调地狱”。

Promise 的三种状态

每个 Promise 实例始终处于以下其中一种状态:

  • pending(待定):初始状态,既没成功也没失败
  • fulfilled(已成功):操作成功完成,可通过 .then() 获取结果
  • rejected(已失败):操作出错,可通过 .catch().then(null, handler) 捕获错误

状态一旦改变(pending → fulfilled 或 pending → rejected),就不可逆,也不会再变。

如何创建和使用 Promise

new Promise() 构造函数创建,它接收一个执行器函数(executor),该函数立即执行,并传入两个参数:resolve(成功时调用)和 reject(失败时调用)。

例如,模拟一个 1 秒后返回用户数据的异步请求:

const fetchUser = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = Math.random() > 0.2; // 80% 概率成功
    if (success) {
      resolve({ id: 123, name: "张三" });
    } else {
      reject(new Error("网络请求失败"));
    }
  }, 1000);
});

使用时推荐链式调用:

fetchUser
  .then(user => {
    console.log("获取成功:", user);
    return user.name.toUpperCase();
  })
  .then(upperName => console.log("大写姓名:", upperName))
  .catch(err => console.error("出错了:", err.message));

常用静态方法:Promise.all、Promise.race、Promise.resolve/reject

这些方法帮你更高效地组合多个 Promise:

  • Promise.all([p1, p2, p3]):全部成功才成功,返回结果数组;任一失败则整体失败
  • Promise.race([p1, p2, p3]):谁先改变状态(无论成功/失败),就采用它的结果
  • Promise.resolve(value):快速创建一个已成功的 Promise(如包装普通值或已有 thenable)
  • Promise.reject(reason):快速创建一个已失败的 Promise

与 async/await 配合更简洁

Promise 是 async/await 的基础。用 async 声明的函数自动返回 Promise,await 可暂停执行,等待 Promise 完成:

async function getUser() {
  try {
    const user = await fetchUser; // 等待 Promise 完成
    console.log("用户:", user);
    return user;
  } catch (err) {
    console.error("加载失败:", err);
  }
}

这比纯 Promise 链读起来更接近同步代码,也更容易调试和错误处理。

文中关于的知识介绍,希望对你的学习有所帮助!若是受益匪浅,那就动动鼠标收藏这篇《JavaScriptPromise详解与使用方法》文章吧,也可关注golang学习网公众号了解相关技术文章。

前往漫画官网入口并下载 ➜
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>