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

javascript如何处理异步_promise是什么【教程】

落敏同学_9241

落敏同学_9241

发布时间:2026-01-26 12:07:02

|

408人浏览过

|

来源于php中文网

原创

Promise 是 JavaScript 中真正能摆脱回调嵌套、让异步代码可读可控的基础设施。它通过 pending/fulfilled/rejected 三种状态和 resolve/reject 机制,将异步流程转为可返回、可传递、可统一处理的对象,并以 .then()、.catch()、Promise.all() 等方法实现可靠链式调用与错误收敛。

javascript如何处理异步_promise是什么【教程】

Promise 不是教程里的抽象概念,它是 JavaScript 中**真正能帮你摆脱回调嵌套、让异步代码可读可控的工具**。它不是“用来学的语法”,而是你写网络请求、文件读取、定时任务时,**每天都要靠它稳住逻辑的基础设施**。

Promise 是什么?别背定义,看它解决什么问题

你写过这样的代码吗?

getUser((user) => {
  getPosts(user.id, (posts) => {
    getComments(posts[0].id, (comments) => {
      console.log(comments);
    });
  });
});

这就是“回调地狱”——缩进越来越深、错误难捕获、流程难复用。Promise 的核心作用就一个:把“等我好了再干啥”这个动作,变成可返回、可传递、可统一处理的对象。

  • 它有且仅有三种状态:pending(进行中)、fulfilled(成功)、rejected(失败)
  • 状态一旦改变(比如从 pending → fulfilled),就再也变不回去
  • resolve() 和 reject() 不是关键字,而是构造函数传进来的两个函数参数——你调它,才触发状态变化

怎么创建一个靠谱的 Promise?关键在 resolve/reject 的时机

很多人封装失败,不是因为语法错,而是没想清楚“什么时候才算真正完成”。比如下面这个常见翻车点:

const badFetch = () => new Promise((resolve, reject) => {
  fetch('/api/user')
    .then(res => res.json())
    .then(data => resolve(data))  // ❌ 错:没处理网络失败、解析失败
    .catch(err => reject(err));
});

正确做法是:所有可能出错的分支,都必须落到 reject 或 resolve 上,不能漏掉任何异步出口:

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

chartjs-reporter
chartjs-reporter

此技能用于在用户需要将结构化数据(查询结果、CSV 摘要、JSON 记录或 Python 字典/列表)转换为独立的 HTML 页面时使用。

下载
const goodFetch = () => new Promise((resolve, reject) => {
  fetch('/api/user')
    .then(res => {
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return res.json();
    })
    .then(data => resolve(data))
    .catch(err => reject(err)); // ✅ 所有异常路径都进了 reject
});
  • 不要在 fetch 外层 try/catch —— 它本身不抛同步错误
  • 不要忘记检查 res.ok,404/500 不会进 catch,但会进 then
  • 如果你只是包装已有 Promise(如 fetch),直接 return 更安全:return fetch(...).then(...).catch(...)

.then() 和 .catch() 怎么链?记住:每个 .then() 都返回新 Promise

这是最容易误解的一点:.then() 里 return 什么,决定了下一个 .then() 拿到什么:

  • return 一个普通值 → 下个 .then() 收到该值(自动包装成 fulfilled Promise)
  • return 一个 Promise → 下个 .then() 等它 settle 后再执行
  • throw 或 return Promise.reject() → 跳转到最近的 .catch()

所以你可以这样串多个请求:

getUser()
  .then(user => getPosts(user.id))     // 返回 Promise
  .then(posts => posts.slice(0, 3))    // 返回普通数组 → 下个 then 收到数组
  .then(top3 => getComments(top3[0].id))
  .catch(err => console.error('任一环节失败:', err.message));

注意:.catch() 会捕获前面所有环节的 rejection,包括 then 回调里抛出的错误 —— 这正是它比传统 try/catch 更适合异步流的原因。

实际项目里,Promise.all() 和 .finally() 是高频救命组合

当你需要“等几个请求全做完再操作”,别手写计数器,用 Promise.all():

Promise.all([
  fetch('/api/users').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
  fetch('/api/comments').then(r => r.json())
]).then(([users, posts, comments]) => {
  render({ users, posts, comments });
}).catch(err => showGlobalError(err));
  • 只要其中一个失败,整个 Promise.all() 就 rejected —— 如果要“不管谁失败都继续”,得用 Promise.allSettled()
  • .finally() 适合放 loading 关闭、资源清理等“无论成败都要做的事”,但它不接收参数,也**不会影响链式结果流向**

真正复杂的地方从来不在语法,而在于你是否意识到:Promise 的设计目标不是“看起来像同步”,而是“让异步失败可预期、流程可拆解、错误可收敛”。哪怕你明天就用 async/await,底层依然是它在托底 —— 所以别跳过亲手写几个 new Promise 的过程。

相关文章

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

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

下载

相关标签:

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

热门AI工具

更多
豆包大模型

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

二狗PPT
二狗PPT Hot

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

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

AionClaw
AionClaw Hot

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

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

WorkBuddy

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

DeepSeek

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

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

相关专题

更多
promise的用法
promise的用法

“promise” 是一种用于处理异步操作的编程概念,它可以用来表示一个异步操作的最终结果。Promise 对象有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。Promise的用法主要包括构造函数、实例方法(then、catch、finally)和状态转换。

4580

2023.10.12

html文本框类型介绍
html文本框类型介绍

html文本框类型有单行文本框、密码文本框、数字文本框、日期文本框、时间文本框、文件上传文本框、多行文本框等等。详细介绍:1、单行文本框是最常见的文本框类型,用于接受单行文本输入,用户可以在文本框中输入任意文本,例如用户名、密码、电子邮件地址等;2、密码文本框用于接受密码输入,用户在输入密码时,文本框中的内容会被隐藏,以保护用户的隐私;3、数字文本框等等。

4203

2023.10.12

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

60

2026.10.22

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

40

2026.10.22

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

40

2026.10.22

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

20

2026.10.22

PHP时间戳漏洞修复教程
PHP时间戳漏洞修复教程

本专题汇总PHP常见时间戳漏洞,包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等,并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案,帮助开发者快速排查和加固时间相关代码。

40

2026.10.22

Golangci-lint配置文件与规则设置
Golangci-lint配置文件与规则设置

本专题聚焦Golangci-lint YAML配置文件,讲清运行参数、规则启停、目录排除、问题过滤及严重级别设置,便于团队统一检查标准。

20

2026.10.22

Golangci-lint安装与入门教程
Golangci-lint安装与入门教程

本专题讲解Golangci-lint的安装、初始化、基础命令和首次代码检查,覆盖本地环境、Docker及多平台用法,帮助Go开发者快速上手。

20

2026.10.22

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

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

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