讲师中心 微信公众号

工具推荐

视频效率加速
剧云
剧云

中文短剧剧本制作平台

updream

一键生成高质量推广成片

AniShort
AniShort

AI短剧协同制作平台

立刻MV
立刻MV

低成本歌曲 MV、视频生成

JavaScript中的Promise是什么_如何使用它处理异步操作?

夜强酱_7792

夜强酱_7792

发布时间:2025-12-15 08:24:07

|

512人浏览过

|

来源于php中文网

原创

Promise 是代表未来完成或失败的异步操作的对象,具有 pending、fulfilled、rejected 三种不可逆状态;通过 new Promise 创建,支持 .then()、.catch()、.finally() 链式调用,并提供 Promise.all() 等静态方法处理并发场景。

javascript中的promise是什么_如何使用它处理异步操作?

Promise 是 JavaScript 中用来更优雅地处理异步操作的对象,它代表一个**尚未完成但未来会完成(或失败)的操作**,避免了传统回调函数嵌套带来的“回调地狱”。

Promise 的三种状态

每个 Promise 实例始终处于以下其中一种状态:

  • pending(等待中):初始状态,既没成功也没失败
  • fulfilled(已成功):操作完成,调用 .then() 获取结果
  • rejected(已失败):操作出错,调用 .catch() 或 .then(null, handler) 捕获错误

状态一旦改变(pending → fulfilled 或 pending → rejected),就不可逆,也不会再变。

创建和使用 Promise

用 new Promise() 构造器创建,接收一个执行器函数(executor),它有两个参数:resolve 和 reject,都是函数:

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

const fetchUser = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = Math.random() > 0.2;
    if (success) {
      resolve({ id: 1, name: "Alice" }); // 成功时调用 resolve
    } else {
      reject(new Error("Network failed")); // 失败时调用 reject
    }
  }, 1000);
});

之后用链式方法消费结果:

Expanso yaml-to-json
Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载
  • .then(result => {...}):处理 fulfilled 状态
  • .catch(error => {...}):统一捕获前面任意环节的 rejected
  • .finally(() => {...}):无论成功失败都会执行(常用于清理,如关闭 loading)

Promise 链式调用与错误传递

每个 .then() 或 .catch() 都返回一个新的 Promise,支持链式写法,也支持在中间做数据转换或发起新异步操作:

fetchUser
  .then(user => {
    console.log("用户获取成功:", user);
    return fetch(`/api/posts?userId=${user.id}`); // 返回新 Promise
  })
  .then(response => response.json())
  .then(posts => console.log("文章列表:", posts))
  .catch(err => console.error("出错了:", err.message))
  .finally(() => console.log("请求流程结束"));

注意:如果某个 .then() 中抛出错误,或返回一个被 reject 的 Promise,控制权会直接跳转到下一个最近的 .catch()。

常用静态方法

Promise 构造器还提供几个实用的静态方法:

  • Promise.resolve(value):快速创建一个立即 fulfilled 的 Promise
  • Promise.reject(error):快速创建一个立即 rejected 的 Promise
  • Promise.all([p1, p2, ...]):全部成功才 fulfilled,任意一个 rejected 就整体 rejected
  • Promise.race([p1, p2, ...]):谁先 settle(fulfill 或 reject),就以它的结果为准
  • Promise.allSettled([p1, p2, ...]):等所有 Promise 都 settle 后返回每个结果的状态数组(ES2020+)

例如用 Promise.all 并发加载多个资源:

Promise.all([
  fetch('/api/user'),
  fetch('/api/profile'),
  fetch('/api/settings')
])
.then(([userRes, profileRes, settingsRes]) => {
  return Promise.all([
    userRes.json(),
    profileRes.json(),
    settingsRes.json()
  ]);
})
.then(([user, profile, settings]) => {
  console.log({ user, profile, settings });
});

基本上就这些。Promise 不复杂但容易忽略状态不可逆、链式返回新 Promise 这些关键点。掌握它,是写可维护异步代码的基础。

热门AI工具

更多
讯飞智文

一款面向学习和办公场景的AI文档创作工具,可辅助生成PPT与Word文档,提高资料整理和内容制作效率。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

咔片AIPPT

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

PixTV
PixTV Hot

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

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

UpDream
UpDream Hot

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

豆包大模型

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

DeepSeek

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

WorkBuddy

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

相关专题

更多
c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

549

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1698

2024.03.01

scripterror怎么解决
scripterror怎么解决

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

1049

2023.10.18

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

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

3420

2023.10.25

promise的用法
promise的用法

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

4840

2023.10.12

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

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

4663

2023.10.12

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

40

2026.11.06

Postman请求头Headers怎么设置
Postman请求头Headers怎么设置

围绕Postman HTTP请求头配置展开,讲解Headers选项的具体使用方式,包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法,帮助用户解决接口调试过程中遇到的请求头配置问题。

20

2026.11.06

Postman接口请求发送教程
Postman接口请求发送教程

详细介绍Postman接口请求的创建与发送方法,涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看,帮助用户掌握Postman接口请求的完整操作流程。

20

2026.11.06

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

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

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