ゴゴゴゴゴ
Skip to content
JOJO
首页文章项目知识库相册音乐
全站搜索
  • Navigate
  • Go to Page
  • escClose
© 2026 JOJOBuilt with Next.js

四种声音一个时代

这里收藏周杰伦、王力宏、陶喆与林俊杰的专辑,也把四位创作者放回完整唱片的语境。陶喆以松弛的律动重塑华语 R&B,周杰伦把说唱、古典与中国式旋律带进流行音乐,王力宏在抒情、摇滚和东方元素之间拓宽制作边界,林俊杰则用细密旋律与宽阔声线记录城市情绪。这里不打乱曲序,也不把专辑压缩成热门单曲;挑一张封面,从第一首听到最后一首,感受开场、中段与尾声如何共同完成一段叙事。

左右滑动浏览,轻触封面,从第一首开始听

正在播放的唱片

选择一首歌曲查看歌词
专辑封面

专辑

    请选择一张唱片等待选曲
    0:00
    0:00

    键盘快捷键

    搜索
    / 或 ⌘K
    回到首页
    G H
    博客列表
    G B
    切换主题
    T
    关闭弹窗
    Esc
    显示帮助
    ?

    按 Esc 关闭此窗口

    Blog550
    • 全部文章(550)
    • 包管理工具(8)
      • Bun 完全指南
      • fnm 完全指南
      • ni 完全指南
      • npm 完全指南
      • nrm 完全指南
      • nvm 完全指南
      • pnpm 完全指南
      • Yarn 完全指南
    • 并发异步(7)
      • 异步任务取消机制
      • Promise静态方法汇总
      • 封装超时工具方法
      • 并发与并行
      • 封装并发任务方法
      • 一道并发相关的面试题
      • 文件写入的原子化与并发操作
    • 打包工具(10)
      • Bun - 全栈 JavaScript 运行时与打包器
      • esbuild - 用 Go 写的极速打包器
      • Parcel - 零配置的极速打包工具
      • Rolldown - Vite 团队打造的 Rust 打包器
      • Rollup - 专注于库开发的打包工具
      • Rspack - Rust 驱动的 Webpack 替代品
      • SWC - Rust 驱动的超快编译器
      • Turbopack - Rust 驱动的下一代打包工具
      • Vite - 下一代前端构建工具
      • Webpack - 功能最强大的模块打包器
    • 算法(74)
      • 课程必看
      • 算法基本概念
      • 评判算法的好坏
      • 复习对数
      • 常见的复杂度
      • 常见算法思维
      • 递归
      • 数据结构
      • 数组结构
      • 顺序查找
      • 二分查找
      • 插值查找
      • 冒泡排序
      • 选择排序
      • 插入排序
      • 折半插入排序
      • 希尔排序
      • 归并排序
      • 快速排序
      • 链表结构
      • 双向链表
      • 单向循环链表
      • 双向循环链表
      • 栈结构
      • 队列结构
      • 循环队列
      • 击鼓传花游戏
      • 双端队列
      • 回文检查器
      • 集合结构
      • 字典结构
      • 树结构
      • 二叉树
      • 二叉树遍历
      • 前序中序还原二叉树
      • 后序中序还原二叉树
      • 二叉树深度优先搜索
      • 二叉树广度优先搜索
      • 二叉树的比较
      • 二叉树diff算法
      • 二叉搜索树
      • 二叉搜索树常见操作
      • 平衡二叉树
      • 二叉树左单旋
      • 二叉树右单旋
      • 二叉树双旋
      • 二叉堆
      • 堆排序
      • 哈夫曼树
      • 图结构
      • 邻接矩阵
      • 邻接表
      • 构建图
      • 图的深度优先搜索
      • 图的广度优先搜索
      • 普里姆算法
      • 克鲁斯卡尔算法
      • LRU算法
      • 动态规划
      • 青蛙跳台阶
      • 不同路径问题
      • 凑零钱问题
      • 打家劫舍
      • 背包问题
      • 回溯算法
      • 数字组合
      • 电话号码字母组合
      • 复原IP地址
      • 数组子集
      • 贪心算法
      • 柠檬水找零
      • 摆动序列
      • 分发糖果
      • 跳跃游戏
    • 文档协同(12)
      • 课程说明
      • 文档协同常见方案
      • OT冲突算法
      • CRDT冲突算法
      • CRDT数据结构
      • 文章翻译
      • Yjs基础介绍
      • Yjs快速上手
      • Yjs细节补充
      • 监听机制
      • 标签页同步
      • WebSocket基础知识
    • 项目实战(1)
      • ShipAny:1小时开发海外游客「中国攻略 + AI旅游助手」SaaS网站
    • AI工具(9)
      • Claude Code 完全指南
      • ComfyUI 完全指南
      • GitHub Copilot 入门指南
      • Coze 完全指南
      • Cursor vs GitHub Copilot 全面对比
      • Cursor-完整指南
      • Dify 完全指南
      • Droid 完全指南
      • n8n 完全指南
    • Astro(5)
      • Astro 入门指南
      • Astro 路由与页面
      • Astro 组件与样式
      • Astro 内容集合
      • Astro 集成与部署
    • CSS(25)
      • CSS 选择器基础
      • CSS 盒模型
      • CSS 定位与层叠
      • 浮动与 BFC
      • Flexbox 布局
      • Grid 布局
      • 响应式设计
      • 伪类与伪元素
      • 现代选择器
      • CSS 变量
      • 层叠层
      • 过渡效果
      • CSS 动画
      • 变换与滤镜
      • 容器查询
      • 文字与排版
      • 背景与渐变
      • 滚动与溢出
      • 裁剪与遮罩
      • 颜色系统
      • 边框与阴影
      • 逻辑属性
      • CSS 函数
      • 多列布局
      • 用户交互
    • ES6+(40)
      • let 和 const 命令
      • 解构赋值基础
      • 解构赋值进阶
      • 字符串的扩展
      • 字符串新增方法
      • 正则表达式扩展
      • 数值的扩展
      • BigInt 大整数
      • 函数默认参数
      • rest 参数与扩展运算符
      • 箭头函数详解
      • 尾调用优化
      • 数组扩展方法
      • 数组新增方法
      • 数组不可变方法
      • 对象的扩展
      • Object 新增方法
      • Symbol 基础
      • Symbol 进阶应用
      • Set 数据结构
      • Map 数据结构
      • TypedArray 类型化数组
      • Proxy 基础
      • Proxy 进阶应用
      • Reflect 元编程
      • 元编程实战案例
      • 装饰器 Decorator
      • Iterator 迭代器
      • Generator 基础
      • Generator 进阶
      • Promise 基础
      • Promise 进阶
      • async 函数
      • await 与错误处理
      • 异步迭代
      • Class 基础
      • Class 继承
      • Module 语法
      • Module 加载
      • ES 新特性汇总
    • HTML(8)
      • HTML 入门:构建 Web 的基石
      • HTML5 语义化:让页面更有意义
      • HTML 表单基础:用户交互的起点
      • HTML 表单进阶:验证与现代特性
      • HTML 多媒体:音视频与响应式图片
      • HTML APIs(上):客户端存储完全指南
      • HTML APIs(下):交互与设备能力
      • Canvas 与 SVG:Web 图形绘制入门
    • JavaScript(30)
      • JavaScript 简介
      • 变量与数据类型
      • 运算符
      • 类型转换
      • 控制流语句
      • 函数基础
      • 对象基础
      • 数组基础
      • 原型与原型链
      • this 关键字
      • 面向对象编程
      • 作用域
      • 闭包
      • 执行上下文
      • DOM 选择器
      • DOM 操作
      • 事件处理
      • 事件委托
      • 错误处理
      • 调试技巧
      • 正则表达式
      • Date 日期对象
      • Math 对象
      • 定时器
      • JSON 处理
      • BOM 基础
      • 本地存储
      • 表单处理
      • AJAX 与 Fetch
      • 严格模式
    • Langchain(37)
      • Langchain基本介绍
      • 模型接口
      • 缓存
      • 提示词模板
      • 结构化提示词
      • Message消息对象
      • 消息占位
      • LCEL
      • 并发流式返回结果
      • Runnable接口
      • 条件路由
      • 字符串解析器
      • 结构化输出解析器
      • 列表输出解析器
      • JSON解析器
      • 正则解析器
      • 本地资源Loader
      • Web资源Loader
      • 文本切割
      • 嵌入处理
      • 内存型向量库
      • 检索优化
      • RAG实践
      • Memory基础
      • 自动维护聊天记录
      • 实现长程记忆
      • 持久化记忆
      • 第三方存储
      • Tools基础
      • Tools配置
      • Zod基础
      • LangChain中使用工具
      • 重新认识Agent
      • LangChain中创建Agent
      • Agent实践
      • 回退机制
      • 回调机制
    • LLM(34)
      • LLM发展历史
      • N-Gram模型
      • 词袋模型
      • 词元
      • 嵌入
      • Transformer内部结构
      • Transformer解码策略
      • Transformer块
      • 本地部署大模型
      • Agent
      • 流式返回信息
      • 支持上下文
      • 获取实时消息
      • 外接DeepSeek
      • Function Calling
      • MCP理论知识
      • Resources
      • Schema
      • 注册资源模板
      • Prompts
      • 监听资源更新
      • 远程通信方式
      • MCP Client
      • 大模型幻觉
      • RCT构词法
      • 提示词常见技巧
      • 基于反馈迭代优化
      • 改善提示效果
      • 提示词评估工具
      • RAG基础知识
      • RAG实践
      • RAG架构演进
      • 大模型微调
      • LoRA微调
    • MCP(8)
      • MCP 入门:连接 AI 与外部世界的桥梁
      • 搭建第一个 MCP Server
      • MCP Tools 深入:让 AI 具备行动能力
      • MCP Resources:向 AI 暴露数据
      • MCP Prompts:预定义 AI 交互模板
      • MCP Transport 与部署
      • 构建 MCP Client:集成到你的应用
      • 实战:构建文档助手 MCP Server
    • Nest(31)
      • 快速上手Nest Cli
      • 三层架构与MVC
      • IoC
      • Nest中的装饰器
      • 模块的基本概念
      • 什么是AOP
      • 中间件与守卫
      • 拦截器
      • 文件上传
      • 自定义装饰器
      • mysql相关回顾
      • 对于ORM的理解
      • 快速上手Redis
      • Nest中使用Redis
      • 状态保存方式
      • Nest中实现Session与JWT
      • JWT登录注册后端处理
      • 使用Passport与循环引用问题
      • 通过环境变量获取配置信息
      • RBAC权限设计1
      • RBAC权限设计2
      • Nest中使用Websocket
      • 日志处理
      • 面向切面的日志处理
      • 快速入门GraphQL
      • Nest中使用GraphQL
      • Swagger API文档
      • 单元测试与E2E测试
      • 安全防护实践
      • 定时任务与任务调度
      • Bull队列与异步任务
    • Next(36)
      • Next.js 简介
      • 项目创建与配置
      • App Router 概述
      • 创建第一个页面
      • 开发工具与调试
      • TypeScript 配置
      • 文件系统路由
      • 动态路由
      • 嵌套路由与布局
      • 路由组
      • 并行路由
      • 拦截路由
      • 导航与链接
      • 中间件
      • Server Components
      • Client Components
      • 混合渲染模式
      • Streaming 与 Suspense
      • 静态与动态渲染
      • 数据获取基础
      • 缓存策略
      • Server Actions
      • Route Handlers
      • 数据库集成
      • 错误处理
      • 图片优化
      • 字体优化
      • 脚本优化
      • 元数据与 SEO
      • 性能分析
      • 认证基础
      • NextAuth 集成
      • 环境变量与配置
      • 测试策略
      • 部署方案
      • 项目实战
    • Nuxt(36)
      • web应用变迁史
      • 课程说明
      • SSR初体验
      • 水合操作
      • 改造CSR项目
      • 基本介绍
      • 配置概览
      • 组件类型
      • Nuxt模块
      • 嵌套路由
      • 动态路由
      • 请求数据
      • server目录
      • 应用部署
      • 中间件
      • 插件
      • layers
      • 过渡
      • 状态管理
      • 全匹配路由
      • 路由补充知识
      • 自定义路由
      • 自定义模块
      • 自定义指令
      • meta相关处理
      • 渲染模式
      • 错误处理
      • 不同阶段错误
      • 客户端渲染组件
      • 其余内置组件
      • 配置相关细节
      • 常用组合式函数
      • 服务器引擎
      • NuxtUI
      • SSR注意事项
      • 课程收官
    • React(55)
      • 序章:React课程介绍
      • React 基本介绍
      • JSX 基础语法
      • 组件与事件绑定
      • 组件状态与数据传递
      • 表单
      • 生命周期
      • Hooks
      • React-router介绍
      • React-router v版本学生管理系统课堂笔记
      • React-redux 介绍
      • Antd介绍
      • coder station前台系统笔记
      • coder station 后台系统笔记
      • Antd Pro介绍
      • Dva介绍
      • Umi.js 介绍
      • 属性默认值和类型验证
      • 高阶组件
      • Ref
      • Context
      • Render Props
      • Portals
      • 错误边界
      • 组件渲染性能优化
      • 前端框架的理解
      • Scheduler调度延时任务
      • 最小堆
      • React中的位运算
      • beginWork工作流程
      • completeWork工作流程
      • 图解diff算法
      • commit 工作流程
      • lane模型
      • React 中的事件
      • Hooks原理
      • React和Vue描述页面的区别
      • useState和useReducer
      • effect相关hook
      • useCallback和useMemo
      • useRef
      • Update
      • 性能优化策略之eagerState
      • 性能优化策略之bailout
      • bailout和ContextAPI
      • 性能优化对日常开发启示
      • 前端框架的分类
      • 虚拟 DOM
      • React 整体架构
      • React 渲染流程
      • Fiber双缓冲
      • MessageChannel
      • Scheduler调度普通任务
      • 课程介绍
      • 课程总结
    • ReactNative(33)
      • RN 基本介绍
      • 快速搭建 RN 开发环境
      • 复习 React 基础知识
      • RN 基础知识
      • 实战案例
      • RN 内置基础组件
      • 容器组件
      • Pressable 组件
      • 列表组件
      • 功能组件
      • 第三方组件库
      • 自定义组件案例:弹框组件
      • 自定义组件案例:单选组件
      • 基础API
      • 屏幕API
      • 设备API
      • 动画API
      • 手势API
      • React Navigation简介
      • 参数传递和标题栏信息配置
      • 嵌套路由与生命周期
      • 其他类型的导航
      • 状态管理介绍
      • Redux
      • 其他第三方库
      • Expo SDK
      • Fabric 架构
      • 渲染、提交和挂载
      • 实现跨平台
      • 扁平化视图
      • 线程模型
      • 如何打包发布应用
      • 通过 React Native CLI 搭建环境
    • TailwindCSS(7)
      • TailwindCSS基础介绍
      • 环境搭建与配置
      • 布局系统
      • 间距与尺寸系统
      • 颜色与主题
      • 响应式设计
      • 交互与动画
    • TypeScript(35)
      • 初识 TypeScript
      • 基础类型
      • 数组与元组
      • 对象类型
      • 函数类型
      • 类型推断与断言
      • 联合类型与交叉类型
      • 字面量类型与类型别名
      • 接口基础
      • 接口进阶
      • 接口继承与实现
      • 类基础
      • 类的访问修饰符
      • 类的继承
      • 类与接口对比
      • 泛型基础
      • 泛型接口与泛型类
      • 泛型约束
      • 内置工具类型(上)
      • 内置工具类型(下)
      • 泛型实战
      • 类型守卫
      • 类型收窄
      • 索引类型与索引签名
      • 映射类型
      • 条件类型
      • infer 关键字
      • 模板字面量类型
      • 模块系统
      • 命名空间
      • 声明文件基础
      • 声明文件进阶
      • tsconfig 配置详解
      • 类型体操入门
      • TypeScript 最佳实践
    • 杂谈(9)
      • Cloudflare 全栈部署指南
      • Creem 支付集成指南
      • Dokploy 自托管部署指南
      • GitHub OAuth 登录集成指南
      • Google OAuth 登录集成指南
      • Stripe 支付集成指南
      • Supabase 完全指南
      • Vercel 自动化部署指南
      • Zeabur 部署指南
    • 全部文章(550)
    • 包管理工具(8)
      • Bun 完全指南
      • fnm 完全指南
      • ni 完全指南
      • npm 完全指南
      • nrm 完全指南
      • nvm 完全指南
      • pnpm 完全指南
      • Yarn 完全指南
    • 并发异步(7)
      • 异步任务取消机制
      • Promise静态方法汇总
      • 封装超时工具方法
      • 并发与并行
      • 封装并发任务方法
      • 一道并发相关的面试题
      • 文件写入的原子化与并发操作
    • 打包工具(10)
      • Bun - 全栈 JavaScript 运行时与打包器
      • esbuild - 用 Go 写的极速打包器
      • Parcel - 零配置的极速打包工具
      • Rolldown - Vite 团队打造的 Rust 打包器
      • Rollup - 专注于库开发的打包工具
      • Rspack - Rust 驱动的 Webpack 替代品
      • SWC - Rust 驱动的超快编译器
      • Turbopack - Rust 驱动的下一代打包工具
      • Vite - 下一代前端构建工具
      • Webpack - 功能最强大的模块打包器
    • 算法(74)
      • 课程必看
      • 算法基本概念
      • 评判算法的好坏
      • 复习对数
      • 常见的复杂度
      • 常见算法思维
      • 递归
      • 数据结构
      • 数组结构
      • 顺序查找
      • 二分查找
      • 插值查找
      • 冒泡排序
      • 选择排序
      • 插入排序
      • 折半插入排序
      • 希尔排序
      • 归并排序
      • 快速排序
      • 链表结构
      • 双向链表
      • 单向循环链表
      • 双向循环链表
      • 栈结构
      • 队列结构
      • 循环队列
      • 击鼓传花游戏
      • 双端队列
      • 回文检查器
      • 集合结构
      • 字典结构
      • 树结构
      • 二叉树
      • 二叉树遍历
      • 前序中序还原二叉树
      • 后序中序还原二叉树
      • 二叉树深度优先搜索
      • 二叉树广度优先搜索
      • 二叉树的比较
      • 二叉树diff算法
      • 二叉搜索树
      • 二叉搜索树常见操作
      • 平衡二叉树
      • 二叉树左单旋
      • 二叉树右单旋
      • 二叉树双旋
      • 二叉堆
      • 堆排序
      • 哈夫曼树
      • 图结构
      • 邻接矩阵
      • 邻接表
      • 构建图
      • 图的深度优先搜索
      • 图的广度优先搜索
      • 普里姆算法
      • 克鲁斯卡尔算法
      • LRU算法
      • 动态规划
      • 青蛙跳台阶
      • 不同路径问题
      • 凑零钱问题
      • 打家劫舍
      • 背包问题
      • 回溯算法
      • 数字组合
      • 电话号码字母组合
      • 复原IP地址
      • 数组子集
      • 贪心算法
      • 柠檬水找零
      • 摆动序列
      • 分发糖果
      • 跳跃游戏
    • 文档协同(12)
      • 课程说明
      • 文档协同常见方案
      • OT冲突算法
      • CRDT冲突算法
      • CRDT数据结构
      • 文章翻译
      • Yjs基础介绍
      • Yjs快速上手
      • Yjs细节补充
      • 监听机制
      • 标签页同步
      • WebSocket基础知识
    • 项目实战(1)
      • ShipAny:1小时开发海外游客「中国攻略 + AI旅游助手」SaaS网站
    • AI工具(9)
      • Claude Code 完全指南
      • ComfyUI 完全指南
      • GitHub Copilot 入门指南
      • Coze 完全指南
      • Cursor vs GitHub Copilot 全面对比
      • Cursor-完整指南
      • Dify 完全指南
      • Droid 完全指南
      • n8n 完全指南
    • Astro(5)
      • Astro 入门指南
      • Astro 路由与页面
      • Astro 组件与样式
      • Astro 内容集合
      • Astro 集成与部署
    • CSS(25)
      • CSS 选择器基础
      • CSS 盒模型
      • CSS 定位与层叠
      • 浮动与 BFC
      • Flexbox 布局
      • Grid 布局
      • 响应式设计
      • 伪类与伪元素
      • 现代选择器
      • CSS 变量
      • 层叠层
      • 过渡效果
      • CSS 动画
      • 变换与滤镜
      • 容器查询
      • 文字与排版
      • 背景与渐变
      • 滚动与溢出
      • 裁剪与遮罩
      • 颜色系统
      • 边框与阴影
      • 逻辑属性
      • CSS 函数
      • 多列布局
      • 用户交互
    • ES6+(40)
      • let 和 const 命令
      • 解构赋值基础
      • 解构赋值进阶
      • 字符串的扩展
      • 字符串新增方法
      • 正则表达式扩展
      • 数值的扩展
      • BigInt 大整数
      • 函数默认参数
      • rest 参数与扩展运算符
      • 箭头函数详解
      • 尾调用优化
      • 数组扩展方法
      • 数组新增方法
      • 数组不可变方法
      • 对象的扩展
      • Object 新增方法
      • Symbol 基础
      • Symbol 进阶应用
      • Set 数据结构
      • Map 数据结构
      • TypedArray 类型化数组
      • Proxy 基础
      • Proxy 进阶应用
      • Reflect 元编程
      • 元编程实战案例
      • 装饰器 Decorator
      • Iterator 迭代器
      • Generator 基础
      • Generator 进阶
      • Promise 基础
      • Promise 进阶
      • async 函数
      • await 与错误处理
      • 异步迭代
      • Class 基础
      • Class 继承
      • Module 语法
      • Module 加载
      • ES 新特性汇总
    • HTML(8)
      • HTML 入门:构建 Web 的基石
      • HTML5 语义化:让页面更有意义
      • HTML 表单基础:用户交互的起点
      • HTML 表单进阶:验证与现代特性
      • HTML 多媒体:音视频与响应式图片
      • HTML APIs(上):客户端存储完全指南
      • HTML APIs(下):交互与设备能力
      • Canvas 与 SVG:Web 图形绘制入门
    • JavaScript(30)
      • JavaScript 简介
      • 变量与数据类型
      • 运算符
      • 类型转换
      • 控制流语句
      • 函数基础
      • 对象基础
      • 数组基础
      • 原型与原型链
      • this 关键字
      • 面向对象编程
      • 作用域
      • 闭包
      • 执行上下文
      • DOM 选择器
      • DOM 操作
      • 事件处理
      • 事件委托
      • 错误处理
      • 调试技巧
      • 正则表达式
      • Date 日期对象
      • Math 对象
      • 定时器
      • JSON 处理
      • BOM 基础
      • 本地存储
      • 表单处理
      • AJAX 与 Fetch
      • 严格模式
    • Langchain(37)
      • Langchain基本介绍
      • 模型接口
      • 缓存
      • 提示词模板
      • 结构化提示词
      • Message消息对象
      • 消息占位
      • LCEL
      • 并发流式返回结果
      • Runnable接口
      • 条件路由
      • 字符串解析器
      • 结构化输出解析器
      • 列表输出解析器
      • JSON解析器
      • 正则解析器
      • 本地资源Loader
      • Web资源Loader
      • 文本切割
      • 嵌入处理
      • 内存型向量库
      • 检索优化
      • RAG实践
      • Memory基础
      • 自动维护聊天记录
      • 实现长程记忆
      • 持久化记忆
      • 第三方存储
      • Tools基础
      • Tools配置
      • Zod基础
      • LangChain中使用工具
      • 重新认识Agent
      • LangChain中创建Agent
      • Agent实践
      • 回退机制
      • 回调机制
    • LLM(34)
      • LLM发展历史
      • N-Gram模型
      • 词袋模型
      • 词元
      • 嵌入
      • Transformer内部结构
      • Transformer解码策略
      • Transformer块
      • 本地部署大模型
      • Agent
      • 流式返回信息
      • 支持上下文
      • 获取实时消息
      • 外接DeepSeek
      • Function Calling
      • MCP理论知识
      • Resources
      • Schema
      • 注册资源模板
      • Prompts
      • 监听资源更新
      • 远程通信方式
      • MCP Client
      • 大模型幻觉
      • RCT构词法
      • 提示词常见技巧
      • 基于反馈迭代优化
      • 改善提示效果
      • 提示词评估工具
      • RAG基础知识
      • RAG实践
      • RAG架构演进
      • 大模型微调
      • LoRA微调
    • MCP(8)
      • MCP 入门:连接 AI 与外部世界的桥梁
      • 搭建第一个 MCP Server
      • MCP Tools 深入:让 AI 具备行动能力
      • MCP Resources:向 AI 暴露数据
      • MCP Prompts:预定义 AI 交互模板
      • MCP Transport 与部署
      • 构建 MCP Client:集成到你的应用
      • 实战:构建文档助手 MCP Server
    • Nest(31)
      • 快速上手Nest Cli
      • 三层架构与MVC
      • IoC
      • Nest中的装饰器
      • 模块的基本概念
      • 什么是AOP
      • 中间件与守卫
      • 拦截器
      • 文件上传
      • 自定义装饰器
      • mysql相关回顾
      • 对于ORM的理解
      • 快速上手Redis
      • Nest中使用Redis
      • 状态保存方式
      • Nest中实现Session与JWT
      • JWT登录注册后端处理
      • 使用Passport与循环引用问题
      • 通过环境变量获取配置信息
      • RBAC权限设计1
      • RBAC权限设计2
      • Nest中使用Websocket
      • 日志处理
      • 面向切面的日志处理
      • 快速入门GraphQL
      • Nest中使用GraphQL
      • Swagger API文档
      • 单元测试与E2E测试
      • 安全防护实践
      • 定时任务与任务调度
      • Bull队列与异步任务
    • Next(36)
      • Next.js 简介
      • 项目创建与配置
      • App Router 概述
      • 创建第一个页面
      • 开发工具与调试
      • TypeScript 配置
      • 文件系统路由
      • 动态路由
      • 嵌套路由与布局
      • 路由组
      • 并行路由
      • 拦截路由
      • 导航与链接
      • 中间件
      • Server Components
      • Client Components
      • 混合渲染模式
      • Streaming 与 Suspense
      • 静态与动态渲染
      • 数据获取基础
      • 缓存策略
      • Server Actions
      • Route Handlers
      • 数据库集成
      • 错误处理
      • 图片优化
      • 字体优化
      • 脚本优化
      • 元数据与 SEO
      • 性能分析
      • 认证基础
      • NextAuth 集成
      • 环境变量与配置
      • 测试策略
      • 部署方案
      • 项目实战
    • Nuxt(36)
      • web应用变迁史
      • 课程说明
      • SSR初体验
      • 水合操作
      • 改造CSR项目
      • 基本介绍
      • 配置概览
      • 组件类型
      • Nuxt模块
      • 嵌套路由
      • 动态路由
      • 请求数据
      • server目录
      • 应用部署
      • 中间件
      • 插件
      • layers
      • 过渡
      • 状态管理
      • 全匹配路由
      • 路由补充知识
      • 自定义路由
      • 自定义模块
      • 自定义指令
      • meta相关处理
      • 渲染模式
      • 错误处理
      • 不同阶段错误
      • 客户端渲染组件
      • 其余内置组件
      • 配置相关细节
      • 常用组合式函数
      • 服务器引擎
      • NuxtUI
      • SSR注意事项
      • 课程收官
    • React(55)
      • 序章:React课程介绍
      • React 基本介绍
      • JSX 基础语法
      • 组件与事件绑定
      • 组件状态与数据传递
      • 表单
      • 生命周期
      • Hooks
      • React-router介绍
      • React-router v版本学生管理系统课堂笔记
      • React-redux 介绍
      • Antd介绍
      • coder station前台系统笔记
      • coder station 后台系统笔记
      • Antd Pro介绍
      • Dva介绍
      • Umi.js 介绍
      • 属性默认值和类型验证
      • 高阶组件
      • Ref
      • Context
      • Render Props
      • Portals
      • 错误边界
      • 组件渲染性能优化
      • 前端框架的理解
      • Scheduler调度延时任务
      • 最小堆
      • React中的位运算
      • beginWork工作流程
      • completeWork工作流程
      • 图解diff算法
      • commit 工作流程
      • lane模型
      • React 中的事件
      • Hooks原理
      • React和Vue描述页面的区别
      • useState和useReducer
      • effect相关hook
      • useCallback和useMemo
      • useRef
      • Update
      • 性能优化策略之eagerState
      • 性能优化策略之bailout
      • bailout和ContextAPI
      • 性能优化对日常开发启示
      • 前端框架的分类
      • 虚拟 DOM
      • React 整体架构
      • React 渲染流程
      • Fiber双缓冲
      • MessageChannel
      • Scheduler调度普通任务
      • 课程介绍
      • 课程总结
    • ReactNative(33)
      • RN 基本介绍
      • 快速搭建 RN 开发环境
      • 复习 React 基础知识
      • RN 基础知识
      • 实战案例
      • RN 内置基础组件
      • 容器组件
      • Pressable 组件
      • 列表组件
      • 功能组件
      • 第三方组件库
      • 自定义组件案例:弹框组件
      • 自定义组件案例:单选组件
      • 基础API
      • 屏幕API
      • 设备API
      • 动画API
      • 手势API
      • React Navigation简介
      • 参数传递和标题栏信息配置
      • 嵌套路由与生命周期
      • 其他类型的导航
      • 状态管理介绍
      • Redux
      • 其他第三方库
      • Expo SDK
      • Fabric 架构
      • 渲染、提交和挂载
      • 实现跨平台
      • 扁平化视图
      • 线程模型
      • 如何打包发布应用
      • 通过 React Native CLI 搭建环境
    • TailwindCSS(7)
      • TailwindCSS基础介绍
      • 环境搭建与配置
      • 布局系统
      • 间距与尺寸系统
      • 颜色与主题
      • 响应式设计
      • 交互与动画
    • TypeScript(35)
      • 初识 TypeScript
      • 基础类型
      • 数组与元组
      • 对象类型
      • 函数类型
      • 类型推断与断言
      • 联合类型与交叉类型
      • 字面量类型与类型别名
      • 接口基础
      • 接口进阶
      • 接口继承与实现
      • 类基础
      • 类的访问修饰符
      • 类的继承
      • 类与接口对比
      • 泛型基础
      • 泛型接口与泛型类
      • 泛型约束
      • 内置工具类型(上)
      • 内置工具类型(下)
      • 泛型实战
      • 类型守卫
      • 类型收窄
      • 索引类型与索引签名
      • 映射类型
      • 条件类型
      • infer 关键字
      • 模板字面量类型
      • 模块系统
      • 命名空间
      • 声明文件基础
      • 声明文件进阶
      • tsconfig 配置详解
      • 类型体操入门
      • TypeScript 最佳实践
    • 杂谈(9)
      • Cloudflare 全栈部署指南
      • Creem 支付集成指南
      • Dokploy 自托管部署指南
      • GitHub OAuth 登录集成指南
      • Google OAuth 登录集成指南
      • Stripe 支付集成指南
      • Supabase 完全指南
      • Vercel 自动化部署指南
      • Zeabur 部署指南

    Promise静态方法汇总

    2025年9月28日 · 23 min
    ChatGPTClaude

    早期大家学习 Promise 的时候,都是从最基础的例子开始的,例如:

    // 创建一个 Promise 实例
    const myPromise = new Promise((resolve, reject) => {
    // 模拟异步任务,例如 2 秒后返回数据
    setTimeout(() => {
    const success = true // 这里模拟任务是否成功
    if (success) {
    resolve('任务成功完成')
    } else {
    reject('任务失败')
    }
    }, 2000)
    })
    console.log('Promise 已创建,但任务还没完成...')
    // 通过 .then() 处理成功结果,.catch() 处理失败结果
    myPromise
    .then((result) => {
    console.log('成功回调:', result)
    })
    .catch((error) => {
    console.error('失败回调:', error)
    })
    .finally(() => {
    console.log('无论成功或失败,这里都会执行')
    })

    不过我们知道,Promise 实际上是一个类,目前 Promise 上面已经有越来越多的静态方法了。这篇文章,咱们就来将 Promise 上面众多的静态方法进行一个汇总。

    首先,我们可以对 Promise 上面的静态方法分类,这里我将其分为两类:

    1. 组合类
    2. 工具类

    组合类

    这类方法的主要作用是把多个 Promise 实例“组合”成一个新的 Promise,并根据一组 Promise 的整体状态来决定返回结果。

    特点:

    • 接收一个可迭代对象(通常是数组)作为参数
    • 会同时监听所有传入的 Promise
    • 返回一个新的 Promise,其状态取决于这一组 Promise 的执行情况

    代表方法:

    • Promise.all
    • Promise.allSettled
    • Promise.race
    • Promise.any

    它们的关键词是:“一组任务 → 一个结果”

    Promise.all

    Promise.all() 是 Promise 组合类方法中最常用的一个。它可以同时执行多个 Promise,并在所有 Promise 都成功时返回一个新的 Promise。只要有一个 Promise 失败,整个 Promise.all() 就会立刻变成失败状态。

    你可以把它理解成“大家一起好,才算好”的模式。

    语法

    Promise.all(iterable)
    • 参数:一个可迭代对象(通常是数组),里面的元素可以是 Promise,也可以是普通值(普通值会被自动转换成已成功的 Promise)。
    • 返回值:一个新的 Promise
      • 成功:返回所有 Promise 的结果数组(顺序与传入顺序一致)
      • 失败:直接返回第一个被拒绝的原因

    示例代码

    // 模拟一个延迟函数
    function delay(ms, value, shouldReject = false) {
    return new Promise((resolve, reject) => {
    setTimeout(() => {
    if (shouldReject) {
    reject(`任务 ${value} 失败`)
    } else {
    resolve(`任务 ${value} 完成`)
    }
    }, ms)
    })
    }
    const task1 = delay(1000, 'A')
    const task2 = delay(2000, 'B')
    const task3 = delay(1500, 'C')
    Promise.all([task1, task2, task3])
    .then((results) => {
    console.log('所有任务完成:', results)
    })
    .catch((error) => {
    console.error('有任务失败:', error)
    })

    运行效果(全部成功时):

    所有任务完成: [ '任务 A 完成', '任务 B 完成', '任务 C 完成' ]

    运行效果(有一个失败时):

    const task1 = delay(1000, 'A')
    const task2 = delay(2000, 'B', true) // 第二个任务失败
    const task3 = delay(1500, 'C')

    输出:

    有任务失败: 任务 B 失败

    适用场景

    • 并发请求多个接口,等所有接口数据都返回后再进行下一步处理
    • 批量加载资源(图片、文件等),要求全部加载成功才能继续
    • 初始化多个异步模块,只有全部准备好才能进入主流程

    Promise.allSettled

    Promise.allSettled() 会并行执行多个 Promise,并在*所有 Promise 都执行完毕(无论成功还是失败)时,返回一个新的 Promise。 它不会因为某个 Promise 失败而提前结束,而是等全部结果都返回,再一次性给你一个“结果快照”。

    你可以把它理解成“不管成败,大家一起交作业”的模式。

    语法

    Promise.allSettled(iterable)
    • 参数:一个可迭代对象(通常是数组),里面的元素可以是 Promise,也可以是普通值(普通值会被自动转换成已成功的 Promise)。
    • 返回值:一个新的 Promise
      • 成功:返回一个数组,每一项都是一个对象:
        • { status: "fulfilled", value: 结果值 }
        • { status: "rejected", reason: 拒绝原因 }

    示例代码

    // 模拟一个延迟函数
    function delay(ms, value, shouldReject = false) {
    return new Promise((resolve, reject) => {
    setTimeout(() => {
    if (shouldReject) {
    reject(`任务 ${value} 失败`)
    } else {
    resolve(`任务 ${value} 完成`)
    }
    }, ms)
    })
    }
    const task1 = delay(1000, 'A')
    const task2 = delay(2000, 'B', true) // 故意让第二个任务失败
    const task3 = delay(1500, 'C')
    Promise.allSettled([task1, task2, task3]).then((results) => {
    console.log('所有任务的最终状态:', results)
    })

    运行效果:

    所有任务的最终状态: [
    { status: 'fulfilled', value: '任务 A 完成' },
    { status: 'rejected', reason: '任务 B 失败' },
    { status: 'fulfilled', value: '任务 C 完成' }
    ]

    适用场景

    • 批量执行任务,但不希望中途因为失败而中断,需要一次性获取所有任务的最终状态
    • 执行多个互不依赖的异步操作,失败的任务结果也需要收集和处理
    • 批量表单验证、批量请求等,即使个别失败也要完整反馈给用户

    Promise.race

    Promise.race() 会并行执行多个 Promise,并在**第一个完成(无论成功还是失败)**的 Promise 状态确定后,立刻返回一个新的 Promise。

    也就是说,谁先结束,就用谁的结果(或错误)作为最终返回值,其它 Promise 的结果会被忽略。

    你可以把它理解成“赛跑”模式——只看谁先到终点,至于其他人后来跑成什么样,并不重要。

    语法

    Promise.race(iterable)

    参数:一个可迭代对象(通常是数组),里面的元素可以是 Promise,也可以是普通值(普通值会被自动转换成已成功的 Promise)。

    返回值:一个新的 Promise

    • 成功:返回第一个完成的 Promise 的值
    • 失败:返回第一个完成的 Promise 的拒绝原因

    示例代码

    // 模拟一个延迟函数
    function delay(ms, value, shouldReject = false) {
    return new Promise((resolve, reject) => {
    setTimeout(() => {
    if (shouldReject) {
    reject(`任务 ${value} 失败`)
    } else {
    resolve(`任务 ${value} 完成`)
    }
    }, ms)
    })
    }
    const task1 = delay(3000, 'A')
    const task2 = delay(1000, 'B') // 这个最快完成
    const task3 = delay(2000, 'C')
    Promise.race([task1, task2, task3])
    .then((result) => {
    console.log('第一个完成的任务结果:', result)
    })
    .catch((error) => {
    console.error('第一个完成的任务失败:', error)
    })

    运行效果(第一个完成的是成功的任务):

    第一个完成的任务结果: 任务 B 完成

    如果第一个完成的是失败的任务:

    const task1 = delay(3000, 'A')
    const task2 = delay(1000, 'B', true) // 最快完成,但失败
    const task3 = delay(2000, 'C')

    输出:

    第一个完成的任务失败: 任务 B 失败

    适用场景

    • 请求超时控制:将真实请求与一个延时拒绝的 Promise 放在一起,谁先完成就用谁的结果
    • 多源数据竞争:同时向多个服务器发请求,谁先返回就用谁的数据
    • 任务择优:并行执行多个任务,只取最先可用的结果

    Promise.any

    Promise.any() 会并行执行多个 Promise,并在第一个成功的 Promise 状态确定后,返回一个新的 Promise。 它会忽略所有失败的 Promise,直到有一个成功为止。 如果所有 Promise 都失败,则返回一个拒绝的 Promise,错误类型是 AggregateError(里面包含所有失败原因)。

    你可以把它理解成“众人拾柴火焰高,只要有人成功就算成功”的模式。

    语法

    Promise.any(iterable)
    • 参数:一个可迭代对象(通常是数组),里面的元素可以是 Promise,也可以是普通值(普通值会被自动转换成已成功的 Promise)。
    • 返回值:一个新的 Promise
      • 成功:返回第一个成功的 Promise 的值
      • 失败:如果所有 Promise 都失败,返回一个 AggregateError,其 .errors 属性是所有拒绝原因的数组

    示例代码

    // 模拟一个延迟函数
    function delay(ms, value, shouldReject = false) {
    return new Promise((resolve, reject) => {
    setTimeout(() => {
    if (shouldReject) {
    reject(`任务 ${value} 失败`)
    } else {
    resolve(`任务 ${value} 完成`)
    }
    }, ms)
    })
    }
    const task1 = delay(1000, 'A', true) // 失败
    const task2 = delay(2000, 'B') // 成功(最先成功)
    const task3 = delay(1500, 'C', true) // 失败
    Promise.any([task1, task2, task3])
    .then((result) => {
    console.log('第一个成功的任务结果:', result)
    })
    .catch((error) => {
    console.error('所有任务都失败:', error)
    console.error('失败原因列表:', error.errors)
    })

    运行效果(第一个成功的任务是 B):

    第一个成功的任务结果: 任务 B 完成

    运行效果(所有任务都失败):

    const task1 = delay(1000, 'A', true)
    const task2 = delay(2000, 'B', true)
    const task3 = delay(1500, 'C', true)

    输出:

    所有任务都失败: [AggregateError: All promises were rejected] {
    [errors]: [ '任务 A 失败', '任务 B 失败', '任务 C 失败' ]
    }
    失败原因列表: [ '任务 A 失败', '任务 B 失败', '任务 C 失败' ]

    适用场景

    • 多路备份请求:向多个数据源发起请求,只要有一个成功即可
    • 高可用策略:执行多个候选任务,选择第一个成功的结果
    • 容错性要求高的业务:不怕失败,只要有一个可用结果就继续执行

    工具类

    这类方法的作用是直接构造一个 Promise 实例,或者把已有的值(不一定是 Promise)转换成 Promise,以便在 Promise 链中使用。

    特点:

    • 不需要监听多个 Promise
    • 不涉及聚合逻辑,更多是创建或包装
    • 常用于把同步结果转成异步形式,或者快速创建拒绝的 Promise

    代表方法:

    • Promise.resolve
    • Promise.reject

    它们的关键词是:“直接得到一个 Promise”

    Promise.resolve(value)

    将任意值包装成一个**已成功(fulfilled)**的 Promise。

    特点:

    • 如果参数本身就是 Promise,则原样返回,不做额外包装。
    • 如果参数是普通值(如数字、字符串、对象等),则返回一个状态为 fulfilled 的 Promise,并立即将该值作为结果传递下去。

    示例代码

    Promise.resolve(42).then((value) => {
    console.log('结果:', value) // 结果: 42
    })
    const p = Promise.resolve(Promise.resolve('已是 Promise'))
    p.then((value) => {
    console.log('结果:', value) // 结果: 已是 Promise
    })

    Promise.reject(reason)

    快速创建一个**已拒绝(rejected)**的 Promise。

    特点:

    • 无论传入什么值,都会立即返回一个状态为 rejected 的 Promise,并将该值作为拒绝原因。
    • 常用于模拟错误、在链式调用中提前终止逻辑等场景。

    示例代码

    Promise.reject('出错了').catch((reason) => {
    console.error('捕获到错误:', reason) // 捕获到错误: 出错了
    })

    两个工具方法的适用场景

    • 将同步值统一为 Promise,方便在异步链中使用(尤其是在 .then() 链中需要返回 Promise 时)。
    • 快速构造拒绝状态,简化错误处理逻辑。
    • 在写单元测试时,用于模拟异步成功/失败的结果。

    新提案

    这类方法是近年来在 ECMAScript 规范中新增或仍处于提案阶段的 Promise 静态方法,它们旨在补充现有 Promise API 的不足,让某些常见模式能用更简洁的方式实现。

    特点:

    • 部分方法已经正式进入标准(如 Promise.withResolvers)
    • 部分方法还在提案阶段(如 Promise.try),在某些运行时或需特定配置才能使用
    • 提供更灵活的 Promise 创建和控制能力
    • 兼顾易用性和可读性,减少模板代码

    代表方法:

    • Promise.withResolvers
    • Promise.try

    Promise.withResolvers

    Promise.withResolvers() 是 ES2024 新增的静态方法,用于一次性创建一个 Promise,并同时获取它的 resolve 与 reject 方法,方便在外部以命令式方式完成或拒绝该 Promise。可以把它视为标准化的 Deferred 模式,避免手写样板代码。

    Deferred(延迟对象):一种常见的异步编程模式,在这个模式里,我们先创建一个 Promise,然后把它的 resolve 和 reject 方法暴露出来,让外部代码在合适的时机去完成(resolve)或拒绝(reject)这个 Promise。

    在它出现之前,我们通常这样写:

    // 传统 Deferred 写法:需要先声明外部变量再赋值
    let resolveFn, rejectFn
    const p = new Promise((resolve, reject) => {
    resolveFn = resolve
    rejectFn = reject
    })
    // 之后在合适时机调用 resolveFn()/rejectFn()

    有了 withResolvers(),可以直接一行拿到 { promise, resolve, reject }。

    语法

    const { promise, resolve, reject } = Promise.withResolvers()
    • promise:新创建的 Promise 实例。
    • resolve(value):将 promise 标记为已成功(fulfilled),把 value 作为结果。
    • reject(reason):将 promise 标记为已拒绝(rejected),把 reason 作为拒绝原因。

    讲到这里,肯定很多同学会有这样的疑问 🤔

    以前 new Promise() 里那个函数是“干活的地方”,现在 Promise.withResolvers() 一下子就把 promise、resolve、reject 都给了我,那原来写异步任务的地方去哪了?

    举个例子:

    如果是以前的写法:

    const p = new Promise((resolve, reject) => {
    // 这里就是干活的地方
    setTimeout(() => {
    resolve('完成了')
    }, 1000)
    })

    这里的 (resolve, reject) => { ... } 构造函数内部是同步执行的,常见做法是:

    • 开始一个异步任务(如定时器、网络请求、文件读取…)
    • 在任务结束时调用 resolve() 或 reject()

    那么用 withResolvers 后,异步任务该写在哪里呢?

    实际上,Promise.withResolvers() 不帮你执行异步任务,它只是先给你一个空的 Promise 和它的控制按钮(resolve、reject)。所以你要做异步任务,直接写在外面就行,等任务结束时用 resolve 或 reject 去改变 Promise 的状态。

    例如:

    const { promise, resolve, reject } = Promise.withResolvers()
    // 干活的地方可以放在这里(构造器外部),甚至在别的函数里
    setTimeout(() => {
    resolve('完成了') // 1 秒后完成 Promise
    }, 1000)
    // 监听结果
    promise.then(console.log)

    这样做的好处:

    1. 解耦:创建 Promise 和执行任务分开,不必绑死在构造函数里面。
    2. 灵活:resolve / reject 可以传给别的模块、事件回调、外部函数,在任何时机、任何地方去结束这个 Promise。
    3. 适合桥接事件/回调:以前 new Promise 只能在构造时写好逻辑,现在你可以先创建 Promise,然后等事件真正发生时才调用 resolve 或 reject。

    Promise.try

    Promise.try() 目前还处于 TC39 提案阶段(Stage 1),尚未进入 ECMAScript 正式标准。它的目标是提供一种更简洁的方式来统一处理同步代码和异步代码中的异常,让它们都以 Promise 的形式返回结果。

    在没有 Promise.try() 之前,我们经常会用 new Promise() 或 Promise.resolve().then(...) 来包装可能抛出错误的代码,这样无论是同步错误还是异步错误,都能进入 Promise 链的 .catch()。

    有了 Promise.try(),这种写法会更简洁直观。

    我们来看一个具体的案例,假设我们有两个操作:

    1. 同步操作:读取一个本地配置文件并解析 JSON
    2. 异步操作:去远程服务器拉取数据

    这两个操作都有可能出错:

    • 同步解析 JSON 可能抛异常
    • 异步请求可能 Promise reject
    // 同步解析 JSON
    function readConfig() {
    // 假设文件内容是错误的 JSON 格式,会抛出 SyntaxError
    const content = '{ invalid json }'
    return JSON.parse(content)
    }
    // 异步请求数据
    function fetchData() {
    return new Promise((resolve, reject) => {
    setTimeout(() => reject('网络错误'), 1000)
    })
    }
    try {
    // 同步调用,必须用 try/catch 捕获
    const config = readConfig()
    // 异步调用,必须用 Promise.catch 处理
    fetchData()
    .then((data) => console.log('数据:', data))
    .catch((err) => console.error('异步出错:', err))
    } catch (err) {
    console.error('同步出错:', err.message)
    }

    问题:

    • 同步和异步的错误处理逻辑被拆成了两套:
      • 同步:try/catch
      • 异步:.catch()
    • 错误分散在两个地方,写法不一致,不方便统一处理

    后面就出现了 try...catch 的一种基于 Promise 化的改进版,如下:

    Promise.resolve().then(() => { ... })

    这种方式,把同步代码包装成 Promise,这样抛错时会走到 .catch(),就不需要额外写 try...catch 了。

    例如上面的例子,我们就可以进行如下的改进

    // 同步解析 JSON
    function readConfig() {
    // 假设文件内容是错误的 JSON 格式,会抛出 SyntaxError
    const content = '{ invalid json }'
    return JSON.parse(content)
    }
    // 异步请求数据
    function fetchData() {
    return new Promise((resolve, reject) => {
    setTimeout(() => reject('网络错误'), 1000)
    })
    }
    // 用 Promise.resolve() 包装,让同步错误也能走到 .catch()
    Promise.resolve()
    .then(() => {
    const config = readConfig() // 同步执行,如果抛错,直接进入 catch
    return fetchData() // 异步 Promise 失败也会进入同一个 catch
    })
    .then((data) => {
    console.log('数据:', data)
    })
    .catch((err) => {
    console.error('捕获到错误:', err.message || err)
    })

    改进点

    • 同步错误(readConfig() 抛出的 SyntaxError)不再需要额外的 try...catch,会直接进入 .catch()
    • 异步错误(fetchData() 的 Promise reject)也走同一个 .catch()
    • 错误处理逻辑集中,避免分散在两处

    接下来我们来看一下 Promise.try(),先来看一下基本的语法:

    语法

    Promise.try(fn)
    • 参数:fn:一个同步或异步的函数
    • 返回值:一个 Promise,如果 fn 执行成功则进入 fulfilled 状态,抛出错误则进入 rejected 状态

    Promise.try(fn) 就是帮你做这件事:

    • 自动执行你传入的函数 fn
    • 如果 fn 返回值是 Promise,会等待它
    • 如果 fn 抛出了同步错误,会直接变成一个 rejected Promise

    有了 Promise.try() 之后,写法会更直接。接下来我们还是使用 Promise.try() 来重构上面的例子:

    // 同步解析 JSON
    function readConfig() {
    // 假设文件内容是错误的 JSON 格式,会抛出 SyntaxError
    const content = '{ invalid json }'
    return JSON.parse(content)
    }
    // 异步请求数据
    function fetchData() {
    return new Promise((resolve, reject) => {
    setTimeout(() => reject('网络错误'), 1000)
    })
    }
    // 用 Promise.try() 统一处理同步和异步错误
    Promise.try(() => {
    const config = readConfig() // 同步执行,如果抛错,直接进入 catch
    return fetchData() // 异步 Promise 失败也会进入同一个 catch
    })
    .then((data) => {
    console.log('数据:', data)
    })
    .catch((err) => {
    console.error('捕获到错误:', err.message || err)
    })

    写在最后

    Promise 的这些静态方法,可以看作是对异步任务的“批量管理工具箱”。

    • 组合类 方法(all、allSettled、race、any)帮助我们一次性协调多个 Promise 的执行,并根据不同的业务需求选择合适的聚合策略。
    • 工具类 方法(resolve、reject)让我们能够快速构造 Promise,或将普通值、错误包装成 Promise,以便在链式调用中保持一致的处理方式。
    • 新提案类 方法(withResolvers、try)则在语法和模式上做了优化,让一些常见的异步控制写法更简洁、更直观。

    在实际开发中,合理选择这些方法可以让异步代码更加优雅、可控:

    • 需要所有任务成功才能继续,就用 Promise.all
    • 不在乎成败,只想收集结果,就用 Promise.allSettled
    • 想要超时或竞争最快结果,就用 Promise.race
    • 容错性强,只要有一个成功即可,就用 Promise.any
    • 需要立即得到一个 Promise,就用 Promise.resolve 或 Promise.reject
    • 想统一处理同步和异步错误,可以考虑 Promise.try(提案)
    • 想在外部任意时机完成或拒绝 Promise,可以用 Promise.withResolvers(ES2024)

    掌握这些方法,并在合适的场景中灵活运用,你的异步任务管理会更加高效,代码也更具可维护性。

    返回 Blog并发异步
    上一篇异步任务取消机制下一篇封装超时工具方法
    Skip toc
    • 组合类
      • Promise.all
      • Promise.allSettled
      • Promise.race
      • Promise.any
    • 工具类
      • Promise.resolve(value)
      • Promise.reject(reason)
    • 新提案
      • Promise.withResolvers
      • Promise.try
    • 写在最后
    Table of Contents
    • 组合类
      • Promise.all
      • Promise.allSettled
      • Promise.race
      • Promise.any
    • 工具类
      • Promise.resolve(value)
      • Promise.reject(reason)
    • 新提案
      • Promise.withResolvers
      • Promise.try
    • 写在最后
    > share on twitter