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

javascript中Promise如何使用_如何避免回调地狱?

千瑶君_9083

千瑶君_9083

发布时间:2026-01-12 18:10:38

|

211人浏览过

|

来源于php中文网

原创

Promise 是需用 new Promise() 构造的对象,执行器函数中必须显式调用 resolve/reject;.then() 链式返回新 Promise,错误需 .catch() 或 try/catch 捕获;async/await 是语法糖但需在 async 函数内使用;Promise 状态不可逆,未处理 rejection 会静默失败。

javascript中promise如何使用_如何避免回调地狱?

Promise 基本写法:用 new Promise() 包裹异步操作

Promise 不是语法糖,而是一个对象,必须用 new Promise() 构造,且传入一个执行器函数(executor),它接收 resolve 和 reject 两个参数。常见错误是忘记 return、漏掉 reject、或在同步错误中没调用 reject。

正确示例:

const fetchUser = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.3;
      if (success) {
        resolve({ id: 123, name: 'Alice' });
      } else {
        reject(new Error('Network failed'));
      }
    }, 500);
  });
};
  • resolve 和 reject 必须显式调用,不会自动触发
  • 异步操作(如 setTimeout、fetch)必须放在 executor 内部,不能“先执行再包 Promise”
  • 同步抛错(比如 JSON.parse 错误)不会被 Promise 捕获,需手动 try/catch + reject

.then() 和 .catch() 链式调用:每个 .then() 返回新 Promise

链式调用的关键在于:每个 .then() 的返回值会成为下一个 .then() 的输入;如果返回的是 Promise,则自动等待其完成;如果抛错或返回 Promise.reject(),后续 .then() 会被跳过,直到遇到 .catch()。

避免回调地狱的核心就在这里:把嵌套变成扁平链。

Zenlink - Node SDK for ZenHeart
Zenlink - Node SDK for ZenHeart

ZenHeart zenlink 与 zenlink-mcp 为 OpenClaw,涵盖安装、MCP 注册、钩子接线、入站轮询及升级维护。

下载

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

fetchUser()
  .then(user => fetchPosts(user.id))
  .then(posts => filterActive(posts))
  .then(filtered => saveToCache(filtered))
  .catch(err => console.error('Failed at:', err.message));
  • 不要在 .then() 里写 if/else 分支并混用 return 和 throw —— 容易漏掉错误路径
  • .catch() 只捕获前面 Promise 链中的 rejection,不捕获 .then() 内部的同步异常(除非你手动 throw)
  • 多个并行请求用 Promise.all([p1, p2, p3]),别串行调用三次 .then()

async/await 是 Promise 的语法糖:但 await 必须在 async 函数内

很多人写 await fetchUser() 却忘了外层函数加 async,结果报错 Uncaught SyntaxError: await is only valid in async function。

正确写法:

const loadProfile = async () => {
  try {
    const user = await fetchUser();
    const posts = await fetchPosts(user.id);
    return { user, posts };
  } catch (err) {
    console.error('Load failed:', err);
    throw err; // 不要静默吞掉错误,下游可能依赖这个 rejection
  }
};
  • await 后面必须是 Promise(或 thenable),否则直接返回原值
  • try/catch 捕获的是 Promise rejection,不是所有 JS 异常(比如 undefined.foo() 还是同步报错)
  • 循环中慎用 await:for-of + await 是串行,想并行得用 Promise.all(…map(async …))

容易被忽略的坑:Promise 状态不可逆、未处理的 rejection 会静默失败

Promise 一旦 resolve 或 reject,状态就锁定,再次调用另一个方法无效。更危险的是:未被 .catch() 或 try/catch 捕获的 rejection,在现代浏览器和 Node.js 中会触发 unhandledrejection 事件,但默认不报错 —— 你的请求失败了,控制台却没提示。

  • 全局监听未处理 rejection(开发期必备):
    window.addEventListener('unhandledrejection', e => console.error(e.reason));
  • 避免“忘记 return”:箭头函数单表达式隐式 return,但若写成块级结构 () => { doSomething(); } 就不返回 Promise,导致链中断
  • 构造 Promise 时,reject 最好传 Error 实例,而不是字符串 —— 方便堆栈追踪和统一错误处理

相关文章

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

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

下载

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

热门AI工具

更多
Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

DeepSeek

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

AionClaw
AionClaw Hot

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

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

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

豆包大模型

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

火山引擎

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

WorkBuddy

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

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2095

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3162

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1076

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3619

2025.09.10

scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

969

2023.10.18

500error怎么解决
500error怎么解决

500error的解决办法有检查服务器日志、检查代码、检查服务器配置、更新软件版本、重新启动服务、调试代码和寻求帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2860

2023.10.25

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

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

1718

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2624

2023.09.04

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

0

2026.10.16

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

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

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