(三)Promise对象理解、方法汇总

一、简介

Promise简单说就是一个容器,里面保存这未来才会结束的事件(通常是一个异步操作的结果)

1、Promise 对象共有三种状态:

Pending: 进行中
resolved: 又称Fulfilled,已完成。
rejected: 已失败

2、Promise 对象的特点:

(1)状态不受外界影响:只有异步操作的结果,可以决定当前是哪一种状态,一旦状态改变,任何时候都可以得到结果。
(2)无法取消Promise,一旦新建它就会立即执行,无法中途取消
(3)如果不设置回调函数,Promise内部抛出错误,不会反应到外部
(4)当处于Pending状态时,无法的的值目前你进展到哪一个阶段(刚刚开始还是即将完成)
resolve函数:将Promise对象的状态从Pending变成resolved。在异步操作成功时调用,并将异步操作的结果,作为参数传递出去。
reject函数:将Promise对象的状态从Pending变成rejected。在一部操作失败时调用,并将异步操作报出错误,作为参数传递出去。
then方法:Promise.prototype.then(),then 方法是定义在原型对象 Promise.prototype 上的,接收两个回调函数作为参数。第一个回调函数式Promise对象的状态变为Resolved时调用,第二个回调函数(可选,不一定要提供)是Promise的状态变为Rejected时调用
在这里插入图片描述

(1)then方法返回的是一个新的Promise实例。
(2)采用链式的then,可以指定一组按照次序调用的回调函数
(3)如果前一个回调函数返回的还是一个Promise对象(即有异步操作),这时后一个回调函数,就会等待该Promise对象的状态发生变化

Promise.prototype.catch()

(1)Promise.prototype.catch 方法是 .then(null, rejection) 的别名,用于指定发生错误时的回调函数
(2)Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个 catch 语句捕获
(3)一般来说,不要在 then 方法里面定义 Rejected 状态的回调函数(即 then 的第二个参数),总是使用 catch 方法
(4)catch 方法返回的还是一个 Promise 对象,因此后面还可以接着调用 then 方法

Promise.prototype.finally()

(1)finally 是一定会被执行的,
finally 方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。

该方法是 ES2018 引入标准的
在这里插入图片描述
Promise.resolve()

将现有对象转为 Promise 对象
在这里插入图片描述
Promise.reject()
返回一个新的 Promise 实例,该实例的状态为 rejected
在这里插入图片描述
Promise.all()
批量处理多个请求,返回的是所有请求结果组成的数组,这前提是,所有请求成功,若其中一个失败,就抛出第一个rejected异常,不再继续往下执行。
全部请求成功

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log('value-',values);
});
// expected output: value-[3, 42, "foo"]

有一个请求失败;无论promise3定义在前还是后,只要有是rejected状态,就输出reject抛出的错误信息

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, '失败');
});


Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log('value-',values);
}).catch(err=>{
	console.log('err-',err)
});
// expected output:"err-失败"

有多个请求失败,输出第一个请求失败t抛出的错误信息

const promise1 = Promise.resolve(3);
const promise2 = Promise.reject('失败');
const promise3 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
   console.log('value-',values);
}).catch((err)=>{
   console.log('err-',err)
  });
// expected output: err-失败

Promise.allSettled()

批量处理请求,无论结果是成功或失败,都继续向下执行;执行完毕,输出的是包含promise状态的数组对象。reject也不会走catch

所有请求成功时

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'foo'));
const promise3 = Promise.resolve(4)

Promise.allSettled([promise1, promise2,promise3]).then((results) => {
  	console.log('results:',results)
	results.forEach((result) => console.log(result.status))
}).catch(err=>{
	console.log('err:',err)
});

// expected output:
// "results:" Array [Object { status: "fulfilled", value: 3 }, Object { status: "fulfilled", value: "foo" }, Object { status: "fulfilled", value: 4 }]
// "fulfilled"
// "fulfilled"
// "fulfilled"

有请求失败时

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promise3 = Promise.reject(4)

Promise.allSettled([promise1, promise2,promise3]).then((results) => {
  	console.log('results:',results)
	results.forEach((result) => console.log(result.status))
}).catch(err=>{
	console.log('err:',err)
});

// expected output:
// "results:" Array [Object { status: "fulfilled", value: 3 }, Object { status: "rejected", reason: "foo" }, Object { status: "rejected", reason: 4 }]
// "fulfilled"
// "rejected"
// "rejected

Promise.any()

批量处理请求,当请求中有一个状态为fullfilled状态时,就返回fullfill状态的回调函数结果;
当结果有多个状态为fullfilled状态的,就返回第一个fullfilled状态的回调函数结果;
当所有请求结果状态为rejected时, 返回AggregateError 错误。
注意:Promise.any() 方法依然是实验性的,尚未被所有的浏览器完全支持

存在请求成功结果时

const promise1 = Promise.resolve(3);
const promise2 = Promise.reject(4);;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.any([promise1, promise2, promise3]).then((values) => {
  console.log('values-',values);
}).catch(err=>{
	console.log('err-',err)
});
//这里有两个请求成功promise1、promise3,返回第一个请求成功的
// expected output: "values-" 3

所有请求都失败

const promise1 = Promise.reject(3);
const promise2 = Promise.reject(4);
const promise3 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, 'foo');
});

Promise.any([promise1, promise2, promise3]).then((values) => {
  console.log('values-',values);
}).catch(err=>{
	console.log('err-',err)
});

// expected output: "err-" AggregateError: All promises were rejected

Promise.race()

批量处理多个请求,哪个结果先执行完,就输出哪个,
无论是结果是成功或者失败,(记忆法:race=赛跑的意思,看谁跑得快)

promise2,比promise1更快执行完,因此输出成功的结果“two“

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
    console.log('value-',value);
  // Both resolve, but promise2 is faster
});
// expected output: "value-two"


promise1和promise2同时请求,即使promise1是rejected状态,也输出“one”;(这跟谁先定义的顺序有关),若promise1是后定义的,promise2是先定义的,则输出promise2,“two”

const promise1 = new Promise((resolve, reject) => {
  setTimeout(reject, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log('value-',value);
 
}).catch((err)=>{
	console.log('err-',err)
});

// expected output: "err-one"

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'two');
});
const promise1 = new Promise((resolve, reject) => {
  setTimeout(reject, 500, 'one');
});



Promise.race([promise1,promise2]).then((value) => {
    console.log('value-',value);
 
}).catch((err)=>{
	console.log('err-',err)
});

// expected output: "value-two"

区别

(1)Promise.allSettled()和Promise.all()

	当您有多个彼此不依赖的异步任务完成时,或者您总是想知道每个promise的结果时通常使用Promise.allSettled()
相比之下,Promise.all() 更适合彼此相互依赖或者在其中任何一个reject时立即结束。
总结:
	Promise.all()和 Promise.allSettled()都是返回结果数组,而all只有请求全部成功才返回,
	allSettled是无论失败成功都返回
	Promise.all()遇到错误就停止
	Promise.allSettled()无论如何执行完

(2)Promise.any()和Promise.race()

Promise.any():返回第一个成功的回调函数运行结果
Promise.race():返回第一个回调函数运行结果,无论成功还是失败

(3)Promise.any()和Promise.all()

a、Promise.any()只要其中一个promise成功,就返回那个已经成功的promise回调函数执行结果
b、Promise.all()只要其中的一个 promise失败,就返回那个已经失败promise的 回调函数执行结果

总结:

Promise.any() 好比逻辑运算符中‘或||’,一个成立则成立,所有不成立才不成立
Promise.all()好比逻辑运算符中“与&&‘,只有都成立则成立,有一个不成立就不成立

参考:
https://baijiahao.baidu.com/s?id=1726652691504853939&wfr=spider&for=pc
https://mp.weixin.qq.com/s/BVQouoS9MOp65Yi_SX5_yw
https://blog.csdn.net/weixin_48723799/article/details/130539568
https://blog.csdn.net/ace15824843202/article/details/124472352

  • 24
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值