当前位置:首页 > 文章列表 > 文章 > 前端 > 掌握JavaScript异步与Promise用法

掌握JavaScript异步与Promise用法

2026-01-04 20:12:41 0浏览 收藏

大家好,今天本人给大家带来文章《理解JavaScript异步编程与Promise使用方法》,文中内容主要涉及到,如果你对文章方面的知识点感兴趣,那就请各位朋友继续看下去吧~希望能真正帮到你们,谢谢!

Promise 是解决回调地狱的链式异步处理机制,非提速魔法;其 executor 同步执行,resolve/reject 回调在微任务队列中运行;需显式调用 resolve/reject 切换状态,then 总返回新 Promise 并自动包装返回值。

怎样理解javascript异步编程_javascript中如何使用promise

Promise 是什么,不是什么

Promise 不是让代码“变快”的魔法,它只是把回调函数的嵌套关系,变成链式调用的结构。它解决的是“回调地狱”,而不是网络延迟或 CPU 计算慢的问题。你写一个 new Promise(),构造函数里的执行器(executor)会**立即同步执行**,但它的 resolvereject 回调,一定是在当前任务队列清空后、下一轮微任务中才运行。

怎么创建和消费一个 Promise

最常踩的坑是:以为 Promise 构造函数里写个异步操作就自动“返回 Promise”了——其实必须显式调用 resolve(value)reject(error) 才算完成状态切换。

  • 构造时传入一个函数,该函数接收 resolvereject 两个参数
  • resolve 触发 then 分支;reject 触发 catchthen(null, handler)
  • then 总是返回一个新的 Promise,所以能链式调用;返回值会自动包装成 Promise(除非返回另一个 Promise)
const fetchUser = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.3;
      if (success) {
        resolve({ id: 1, name: 'Alice' });
      } else {
        reject(new Error('Network failed'));
      }
    }, 200);
  });
};

fetchUser()
  .then(user => {
    console.log('Got user:', user);
    return user.name.toUpperCase();
  })
  .then(name => console.log('Uppercase:', name))
  .catch(err => console.error('Error:', err.message));

常见错误:忘记 catch、误用 return、混用 await

Promise 链一旦漏掉 catch,错误就会静默丢失(尤其在生产环境没开 unhandledrejection 监听时)。另外,很多人在 then 里写了异步操作但忘了 return,导致后续 then 拿到 undefined

  • 永远在 Promise 链末尾加 .catch(),或用 try/catch 包裹 await
  • then 中发起新异步操作(如另一个 fetch),必须 return 它,否则链中断
  • await 只能在 async 函数内使用;直接在顶层写 await fetch(...) 在某些环境(如老版 Node.js)会报语法错误

Promise.all 和 Promise.race 的实际取舍

这两个方法看起来很酷,但用错场景反而引入 bug。比如 Promise.all 是“全成功才成功”,只要一个 reject,整个就失败——这不一定是你想要的“并行请求”。而 Promise.race 返回第一个 settled(无论 fulfill 还是 reject)的结果,容易误把超时错误当正常响应。

  • 需要所有请求都成功才继续 → 用 Promise.all([...])
  • 只想取最快的那个响应(比如多个 CDN 接口选最快的)→ 用 Promise.race([...])
  • 想并发请求、各自独立处理错误 → 改用 Promise.allSettled([...])(ES2020+)
  • 想实现超时控制 → 不要用 race 简单包一层,要确保 timeout 的 Promise 一定 reject,且原 Promise 被取消(注意:原生 Promise 无法取消,需配合 AbortController)
真正难的不是写对语法,而是判断某个逻辑是否该用 Promise 封装、什么时候该退回到 callback 或改用 async/await。比如事件监听器里反复触发的异步动作,Promise 一次性的语义反而不合适——这时候可能更该用 Observable 或手动管理状态。

以上就是本文的全部内容了,是否有顺利帮助你解决问题?若是能给你带来学习上的帮助,请大家多多支持golang学习网!更多关于文章的相关知识,也可关注golang学习网公众号。

抖音1-75级花费明细一览表抖音1-75级花费明细一览表
上一篇
抖音1-75级花费明细一览表
微云保险箱怎么开?文件保险箱使用教程
下一篇
微云保险箱怎么开?文件保险箱使用教程
查看更多
最新文章
资料下载
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    485次学习
查看更多
AI推荐
  • ChatExcel酷表:告别Excel难题,北大团队AI助手助您轻松处理数据
    ChatExcel酷表
    ChatExcel酷表是由北京大学团队打造的Excel聊天机器人,用自然语言操控表格,简化数据处理,告别繁琐操作,提升工作效率!适用于学生、上班族及政府人员。
    4082次使用
  • Any绘本:开源免费AI绘本创作工具深度解析
    Any绘本
    探索Any绘本(anypicturebook.com/zh),一款开源免费的AI绘本创作工具,基于Google Gemini与Flux AI模型,让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景,零门槛,高自由度,技术透明,本地可控。
    4432次使用
  • 可赞AI:AI驱动办公可视化智能工具,一键高效生成文档图表脑图
    可赞AI
    可赞AI,AI驱动的办公可视化智能工具,助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析,还是一键生成专业图表、脑图、知识卡片,可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景,大幅提升办公效率,降低专业门槛,是您提升工作效率的得力助手。
    4298次使用
  • 星月写作:AI网文创作神器,助力爆款小说速成
    星月写作
    星月写作是国内首款聚焦中文网络小说创作的AI辅助工具,解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配,助力新人快速上手,资深作者效率倍增。
    5724次使用
  • MagicLight.ai:叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画
    MagicLight
    MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台,专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型,保障角色、风格、场景高度一致性,让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销,助您轻松实现创意落地与商业化。
    4671次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码