讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript中的Promise是什么以及如何使用?【教程】

星萱小哥_5817

星萱小哥_5817

发布时间:2026-01-29 15:39:08

|

560人浏览过

|

来源于php中文网

原创

Promise 是为解决异步流程控制设计的状态容器,代表“将来会有结果”的操作,具 pending/fulfilled/rejected 三种不可逆状态,需显式调用 resolve/reject,.then/.catch 实现链式处理,async/await 是其语法糖。

javascript中的promise是什么以及如何使用?【教程】

Promise 不是回调函数的语法糖,而是为解决异步流程控制而设计的状态容器。 它不能消除异步,但能让你把“等结果”这件事写得更清晰、更可组合。

Promise 是什么:一个有状态的异步值占位符

它代表一个「目前可能还没完成,但将来会有结果」的操作。这个操作只有三种确定状态:pending(进行中)、fulfilled(成功)、rejected(失败)。一旦进入后两者,状态就不可逆,且结果值只能被读取一次。

常见误解是把它当成“自动异步化工具”——new Promise(() => {}) 本身不会触发异步,真正异步的是你传进去的执行器函数里调用的 setTimeout、fetch、fs.readFile 这类操作。

如何创建和消费:用 new Promise 和 .then/.catch

手动创建 Promise 时,必须在执行器函数中显式调用 resolve() 或 reject(),否则它永远卡在 pending:

立即学习“Java免费学习笔记(深入)”;

java-api-doc-generator
java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载
const p = new Promise((resolve, reject) => {
  if (Math.random() > 0.5) {
    resolve('ok'); // 触发 .then
  } else {
    reject(new Error('fail')); // 触发 .catch
  }
});

消费时注意链式调用的返回值规则:

  • .then(onFulfilled) 返回一个新的 Promise;如果 onFulfilled 返回普通值,新 Promise 状态为 fulfilled,值就是该返回值
  • .then(onFulfilled, onRejected) 的第二个参数只捕获当前 Promise 的 rejection,不拦截 onFulfilled 中抛出的错误
  • 推荐统一用 .catch() 收尾,它能捕获前面所有环节的 rejection(包括 onFulfilled 中 throw 的错误)

避免常见陷阱:嵌套、忘记 return、吞掉错误

下面这些写法极易出错:

  • 在 .then 里不 return 异步操作,导致后续 .then 拿到 undefined 而不是预期 Promise
  • 用 try/catch 包裹 new Promise 外部代码——它捕获不到 Promise 内部的 reject,因为那是异步抛出的
  • 写了 .then(success, fail) 却以为能捕获 success 函数里的异常,实际不能
  • 多个并行请求用 .then 串行写,而不是用 Promise.all([p1, p2]),白白拉长总耗时

现代替代方案:async/await 让 Promise 更好读

async 函数本质就是语法糖,它自动把返回值包装成 Promise,内部用 await 等待 Promise 解析。但它没改变 Promise 的底层行为:

async function loadUser() {
  try {
    const res = await fetch('/api/user');
    if (!res.ok) throw new Error('HTTP error');
    return await res.json(); // 注意:await 后面必须是 Promise
  } catch (err) {
    console.error(err); // 这里能捕获 fetch 失败、JSON 解析失败、throw 的错误
  }
}

关键点在于:await 只解包 Promise 的 fulfilled 值,rejected 会直接 throw,所以必须用 try/catch —— 这和 .catch() 的作用域是一致的,只是写法更线性。

真正容易被忽略的是:Promise 的错误传播是「静默丢弃」的,如果你创建了一个 Promise 但没接 .catch 或 try/catch,Chrome 和 Node.js 都会抛 UnhandledPromiseRejectionWarning,线上环境可能直接 crash。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2866

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5799

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

4107

2026.03.24

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4696

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1395

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1838

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

10243

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

1020

2023.09.01

Uvicorn 报错与问题解决教程
Uvicorn 报错与问题解决教程

本专题汇总了Uvicorn服务器常见问题与报错解决的教程合集,涵盖启动失败、端口占用、模块导入错误、事件循环冲突及热重载失效等典型故障的排查思路。同时整理了多进程与Worker配置、SSL/HTTPS证书报错、跨域与代理配置等实战解决方案,助你快速定位并解决Uvicorn运行中的各类问题。

0

2026.11.02

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn