Promise API ：new Promise(），prototype.then，prototype.catch，resolve，reject，all，race

原创 已于 2022-12-03 10:51:16 修改 · 224 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #原型模式 #前端

于 2022-11-30 13:38:29 首次发布
本文详细讲解了Promise构造函数、executor、then与catch方法的工作原理，重点阐述了then链式调用和错误穿透，并介绍了Promise.resolve和Promise.reject的使用。通过实例解析了Promise.all和Promise.race的区别，适合理解Promise在异步编程中的关键作用。

1.

Promise构造函数：new Promise(executor){}

 executor函数：是同步执行的，(resolve,reject)=>{}

 resolve函数：调用resolve将Promise实例内部状态改为成功(fulfilled)

 reject函数：调用reject将Promise实例内部状态改为成功(rejected)

 2.

Promise.prototype.then方法：Promise实例.then(onFulfilled,onRejected)

 onFulfilled:成功的回调函数(value)=>{}

 onRejected:失败的回调函数(reason)=>{}

特别注意（难点）：then方法会返回一个新的Promise实例对象

3.

Promise.prototype.catch方法：Promise实例.catch(onRejected)

 onRejected:失败的回调函数(reason)=>{}

 说明：catch方法是then方法的语法糖，相当于：then(undefiend,onRejected)

4.

 Promise.resolve方法：Promise.resolve(value)

 说明：用于快速返回一个状态为fulfilled或rejected的Promise实例对象

 备注：value的值可能是：（1）非Promise值  （2）Promise值

5.

 Promise.reject方法：Promise.reject(reason)

 说明：用于快速返回一个状态必为rejected的Promise实例对象

6.

 Promise.all方法：Promise.all(promiseArr)

 promiseArr：包含n个Promise实例的数组

 说明：返回一个新的Promise实例，只有所有的promise都成功才成功，只要有一个失败就直接失败

7.

 Promise.race方法：Promise.race(promiseArr)

 promiseArr：包含n个Promise实例的数组

 说明：返回一个新的Promise实例，成功还是失败？，已最先出结果的Promise为准

视频解析：16_Promise.all与Promise.race_哔哩哔哩_bilibili

Promise实例.then()链式调用，中段Promise链，Promise错误穿透.catch()_Allen 赵奇隆的博客-优快云博客

Typescript实现Promise,[then|catch|finally|resolve|reject|race|all|any]
zjq_supperman的博客
12-25 2948
ES6 Promise详细源码实现，包含then/catch/finally/resovle/reject/all/race/any
Promise详解（resolve,reject,catch）
CC酱写前端的博客
08-13 1648
一:何为Promise？ Promise其实是一个构造函数，它有resolve，reject，race等静态方法;它的原型（prototype）上有then，catch方法，因此只要作为Promise的实例，都可以共享并调用Promise.prototype上面的方法(then,catch),接下来我们试着使用一 下Promise。 二：Promise的使用 首先我们来看一下Promise的使用语法： var p = new Promise(function (resolve, reject) {
一个Promise全新API
weixin_57031986的博客
03-12 476
这使得在某些更高级的用例中可能会更加方便，例如：在重复事件中重用解决和拒绝函数，特别是在处理流和队列时。最近，Promise 新出了一个方法，已经进入 Stage 3 （候选阶段） ，相信很快就能达到 Stage 4 （完成阶段），并在项目中广泛使用。的关键点，在于现在解决和拒绝函数与 Promise 对象本身处于同一作用域，而不是在执行器中创建并且只能使用一次。它的关键点，在于现在解决和拒绝函数与 Promise 对象本身处于同一作用域，而不是在执行器中创建并且只能使用一次。的版本才能使用这个方法。
promise一些常见api
qq_37938547的博客
06-26 502
promise.then 错误处理 继上一篇接着对promise进行深挖，上一篇主要是对正确处理做了实验，现在来看看什么样的错误处理可以在then里面输出； new Promise((resolve,reject)=>{ // resolve("fullfilled"); // 1. reject // reject(new Error("this is a error")); // 2. throw抛出的 // throw new Error("ERRO
JavaScript Promise 对象
guorui999的博客
01-16 250
如果Promise.all方法和Promise.race方法的参数，不是Promise实例，就会先调用下面讲到的Promise.resolve方法，将参数转为Promise实例，再进一步处理。上面代码生成一个新的Promise对象的实例p，它的状态为fulfilled，所以回调函数会立即执行，Promise.resolve方法的参数就是回调函数的参数。（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
Promise常用API介绍
qq_52788258的博客
11-13 3066
1.Promise构造函数: Promise (excutor){} 2.Promise.prototype.then方法:(onResolved, onRejected) =>{} 3.Promise.prototype.catch方法:(onRejected)=>{} 4.Promise.resolve方法: (value) =>{} 5.Promise.reject方法: (reason) =>{} 6.Promise.all方法:(promises)=> {} 7.Promise.race 方法
Promise的相关介绍
Serena_tz的博客
04-27 304
二种类型的回调函数 同步回调 理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中 例子: 数组遍历相关的回调函数 / Promise 的 excutor 函数 异步回调 理解: 不会立即执行, 会放入回调队列中将来执行 例子: 定时器回调 / ajax 回调 / Promise 的成功|失败的回调 JS的error处理 错误的类型 Error: 所有错误的父类型 ReferenceError: 引用的变量不存在 TypeError: 数据类型不正确的错误 RangeError: 数据值不
ES6 （十六）Promise对象、结合Ajax(XMLHttpRequest)、`resolve`或`reject`位置、then方法（返回新的Promise对象）、catch()（吃掉错误）
qq_43456781的博客
08-06 715
ES6 （十六）Promise对象、结合Ajax(XMLHttpRequest)、resolve或reject位置、then方法（返回新的Promise对象）、catch()（Promise吃掉错误）、Promise.allSettled()、Promise.resolve() 文章目录ES6 （十六）Promise对象、结合Ajax(XMLHttpRequest)、`resolve`或`reject`位置、then方法（返回新的Promise对象）、catch()（Promise吃掉错误）、Promise
js-Promise：手写系列手写promise，vue ..
02-21
一个 Promise 实例可以通过 `new Promise()` 创建，构造函数接收一个执行器函数（executor），该函数接受两个参数：resolve 和 reject，分别用于改变 Promise 的状态。 ```javascript function myPromiseExecutor...
【手写 Promise 源码】第九篇 - Promise.resolve 和 Promise.reject 的实现
BraveWangDev
01-30 615
本篇，主要实现了 Promise 的两个静态 API（类方法）：Promise.resolve 和 Promise.reject：1，Promise.resolve 创建并返回一个成功的 promise； 2，Promise.reject 创建并返回一个失败的 promise；3，Promise.resolve 会等待异步操作完成`Promise.reject` 失败会直接返回；
常用的promise API
初郁
03-08 4536
Promise构造函数: Promise (excutor) {} excutor函数: 同步执行 (resolve, reject) => {} resolve函数: 内部定义成功时我们调用的函数 value => {} reject函数: 内部定义失败时我们调用的函数 reason => {} 说明: excutor会在Promise内部立即同步回调,异步操作在执行器中执行 Promise.prototype.then方法: (onResolved, onRejected) ..
对Promise.resolve()，Promise.reject()，Promise.prototype.then()的初步了解
代码有点烂
08-12 1883
首先须明确的的是： 静态函数Promise.resolve（）返回一个被解析后的的Promise对象。 静态函数Promise.reject（）返回一个被拒绝的Promise对象。 Promise.prototype.then( ) 也返回一个promise Promise.resolve（）与Promise.reject（）都可以给定参数。但要注意，如果使用多个参数调用resol
Promise 的 API 理解与使用
浮生离梦的博客
08-08 1457
一、promise 的 API 说明 Promise 构造函数: Promise (excutor) {}，如下所示： executor 函数: 执行器 (resolve, reject) => {} resolve 函数: 内部定义成功时我们调用的函数 value => {} reject 函数: 内部定义失败时我们调用的函数 reason => {} 说明: executor会在 Promise 内部立即同步调用,异步操作在执行器中执行 Promise.prototype.t
四. 几个Promise常用API的介绍与使用
p1967914901的博客
07-16 2155
四. 几个常用API的介绍与使用 1. Promise构造函数：Promise(excutor){} excutor函数：同步执行 (resolve, reject) => {} resolve函数：内部定义成功时我们调用的函数 value =>{} reject函数：内部定义失败时我们调用的函数 reason => {} 说明：excutor会在Promise内部立即同步回调,异步操作在执行器中执行 2. Promise.prototype.then方法：(onResolved, on
Promise概念和常用api
......
02-18 8409
1、概念:Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 通俗讲，Promise 是一个许诺、承诺,是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。 Pending  正在做。。。 Resolved 完成这个承
Promise的api使用方法
wfly blog
11-04 501
Promise构造函数 Promise构造函数: Promise (excutor) {} excutor函数: 同步执行 (resolve, reject) => {} resolve函数: 内部定义成功时我们调用的函数 value => {} reject函数: 内部定义失败时我们调用的函数 reason => {} 说明:...
axios 取消请求:CancelToken
Allen的博客
12-01 9806
axios 取消请求:CancelToken
i18n vue 多语言配置，切换刷新（setLocaleMessage，mergeLocaleMessage）
Allen的博客
11-16 8876
i18n vue 多语言配置，切换刷新（setLocaleMessage，mergeLocaleMessage）
vue+axios 前端实现登录拦截的两种方式（路由拦截：beforeEach、http拦截，axios请求拦截，响应拦截）
Allen的博客
10-11 8526
vue+axios 前端实现登录拦截的两种方式（路由拦截、http拦截，axios请求拦截，响应拦截）
Promise {<pending>} [[Prototype]] : Promise catch : ƒ catch() constructor : ƒ Promise() finally : ƒ finally() then : ƒ then() Symbol(Symbol.toStringTag) : "Promise" [[Prototype]] : Object [[PromiseState]] : "pending" [[PromiseResult]] : undefined
最新发布
06-22
<think>我们正在讨论JavaScript中Promise的pending状态。根据引用[3]，Promise有三种状态：pending（进行中）、resolved（已成功）和rejected（已失败）。初始状态是pending，当调用resolve()时状态变为resolved，调用reject()时变为rejected。用户的问题是想理解Promise状态为pending的原因以及如何处理。结合引用中的信息，我们可以分析如下：###原因分析1.**未调用resolve或reject**：如果创建Promise时，传入的函数（执行器函数）内部没有调用resolve或reject，那么Promise就会一直保持pending状态。例如：```javascriptletp=newPromise((resolve,reject)=>{//没有调用resolve或reject});console.log(p);//状态为pending```2.**异步操作未完成**：如果执行器函数中有异步操作（如setTimeout、网络请求等），并且在异步操作完成时才调用resolve或reject，那么在异步操作完成之前，Promise的状态都是pending。例如：```javascriptletp=newPromise((resolve)=>{setTimeout(()=>resolve("完成"),1000);});//在1秒内，p的状态都是pending```3.**使用race方法检测状态**：引用[1]中提供了一种检测Promise状态的方法，通过Promise.race来比较。如果返回'pending'，说明原始Promise仍然处于pending状态。###解决方法1.**确保调用resolve或reject**：在Promise的执行器函数中，无论操作是同步还是异步，最终都要调用resolve或reject来改变状态。避免遗漏。2.**处理异步操作**：对于异步操作，需要等待异步操作完成后再改变状态。确保在异步回调中调用resolve或reject。3.**使用async/await或then方法**：当使用一个返回Promise的函数时，我们可以使用then方法或async/await来等待Promise状态改变。例如：```javascriptasyncfunctionfetchData(){try{letdata=awaitp;//等待直到p的状态不是pendingconsole.log(data);}catch(error){console.error(error);}}```或者```javascriptp.then(data=>{console.log(data);}).catch(error=>{console.error(error);});```4.**避免长时间pending**：如果某个Promise长时间处于pending状态，可能是由于操作本身耗时很长，或者出现了逻辑错误（忘记调用resolve/reject）。我们需要检查代码逻辑，确保在适当的时候改变状态。5.**设置超时**：为了防止Promise永久pending，可以设置一个超时机制。例如，使用Promise.race将一个超时Promise和原始Promise竞争：```javascriptfunctionwithTimeout(promise,timeout){lettimeoutPromise=newPromise((_,reject)=>{setTimeout(()=>reject(newError('超时')),timeout);});returnPromise.race([promise,timeoutPromise]);}//使用letp=newPromise(resolve=>{//可能长时间不resolve});withTimeout(p,5000).then(...).catch(...);//5秒超时```###示例根据引用[1]中的代码，我们可以检测一个Promise的状态：```javascriptconstpromiseState=promise=>{consttarget={};returnPromise.race([promise,target]).then(value=>(value===target)?'pending':'fulfilled',()=>'rejected',);}//测试leta=Promise.resolve();letb=Promise.reject();letc=newPromise(()=>{});//既不resolve也不rejectpromiseState(a).then(state=>console.log(state));//fulfilledpromiseState(b).then(state=>console.log(state));//rejectedpromiseState(c).then(state=>console.log(state));//pending```###总结Promise处于pending状态的原因主要是未调用resolve/reject或异步操作未完成。处理方法是确保在适当的时候调用resolve/reject，并使用then/catch或async/await来处理结果，同时可以设置超时避免永久pending。---§§相关问题§§1.如何检测一个Promise对象是否处于pending状态？2.如何避免Promise长时间处于pending状态？3.在异步操作中忘记调用resolve/reject会导致什么问题？4.如何使用Promise.race实现超时控制？5.Promise的状态改变后还能再次改变吗？</think>### JavaScript Promise Pending 状态详解 #### 一、Pending 状态的原因 Promise 处于 pending（进行中）状态的根本原因是**异步操作尚未完成**，具体可分为： 1. **未调用 resolve/reject** ```javascript // 示例：既未调用 resolve 也未调用 reject const pendingPromise = new Promise((resolve, reject) => { // 缺少 resolve() 或 reject() }); ``` 状态将永远保持 pending[^3] 2. **异步操作未完成** ```javascript const asyncOp = new Promise((resolve) => { setTimeout(() => resolve("完成"), 3000); // 3秒内状态为 pending }); ``` 3. **链式调用未终结** ```javascript fetch('/data') .then(response => { // 未返回新值或 Promise // 状态将保持 pending }); ``` #### 二、解决方案 ##### 1. 确保调用 resolve/reject ```javascript // 正确示例 const validPromise = new Promise((resolve, reject) => { setTimeout(() => { Math.random() > 0.5 ? resolve("成功") : reject("失败"); }, 1000); }); ``` ##### 2. 处理异步操作完成状态 使用 `then()`/`catch()` 捕获状态变更： ```javascript asyncOp .then(result => console.log("已完成:", result)) .catch(error => console.error("已拒绝:", error)) .finally(() => console.log("状态已确定")); ``` ##### 3. 检测 pending 状态（引用[1]方案） ```javascript const promiseState = promise => { const target = {}; return Promise.race([promise, target]).then( value => (value === target) ? 'pending' : 'fulfilled', () => 'rejected' ); } // 使用示例 promiseState(asyncOp).then(state => { if(state === 'pending') console.log("操作仍在进行"); }); ``` ##### 4. 超时处理 ```javascript function withTimeout(promise, timeoutMs) { const timeout = new Promise((_, reject) => setTimeout(() => reject(new Error('超时')), timeoutMs) ); return Promise.race([promise, timeout]); } // 使用 withTimeout(fetch('/data'), 5000) .catch(err => console.error(err)); // 5秒未完成则超时 ``` #### 三、关键机制 1. **状态单向流动** $$ \text{pending} \xrightarrow{\text{resolve()}} \text{fulfilled} \quad \text{或} \quad \text{pending} \xrightarrow{\text{reject()}} \text{rejected} $$ 状态一旦变更不可逆转[^3] 2. **执行器函数要求** Promise 构造函数**必须接收函数参数**，否则报错（引用[2]）： ```javascript new Promise() // TypeError: Promise resolver undefined is not a function ``` #### 四、最佳实践 1. **始终返回终结操作** ```javascript fetch('/data') .then(response => response.json()) .then(data => { // 返回明确值 return { status: 'success', data }; }); ``` 2. **添加超时控制** 关键业务操作建议使用 `Promise.race()` 实现超时限制 3. **避免嵌套陷阱** ```javascript // 错误：嵌套导致内层 promise 状态被忽略 fetch('/a').then(a => { fetch('/b').then(b => a + b); // 未返回 }); // 正确：返回链式调用 fetch('/a') .then(a => fetch('/b').then(b => a + b)); ``` > 当 Promise 保持 pending 时，通常意味着： > 1. 异步操作未完成（正常） > 2. 忘记调用 resolve/reject（需修复） > 3. 未正确处理 promise 链（需检查返回语句） ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值