【ES6.0】- Promise对象

【ES6.0】- Promise对象

文章目录

  • 【ES6.0】- Promise对象
    • 一、概述
    • 二、Promise状态
    • 三、Promise方法
      • 3.1 Promise.prototype.then方法:链式操作
      • 3.2 Promise.prototype.catch方法:捕捉错误
      • 3.3 Promise.race方法:捕捉错误
      • 3.4 Promise.any()
      • 3.5 Promise.all()
      • 3.6 Promise.allSettled()
    • 四、总结

一、概述

Promise是异步编程的一种解决方案,是一种javascript处理异步操作的一种常见方式。Promise是一种处理异步操作的设计模式,提供了一种更结构化,更可靠的方式来处理异步任务。

二、Promise状态

Promise异步操作有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。除了异步操作的结果,任何其他操作都无法改变状态。

Promise对象只有:从pending变为fulfilled和从penging变为rejected的状态改变。只要处于fulfilled和rejected,状态就不会再变为resolved (已定型)。

Promise状态演示

const pm1=new Promise(function(resolve,reject){resolve('resolve1')resolve('resolve2')
})const pm2=new Promise(function(resolve,reject){resolve('resolve3')reject('reject1')
})pm1.then(function(value){console.log('pm1->then->value',value)  //resolve1
})pm2.then(function(value){console.log('pm2->then->value',value)  // resolve3
})

状态的缺点:

无法取消Promise,一旦新建它就会立即执行,无法中途取消。如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。当处于pending状态时,无法得知目前进展到哪一个阶段。

三、Promise方法

3.1 Promise.prototype.then方法:链式操作

Promise.prototype.then方法返回的是一个新的Promise对象,因此可以采用链式写法:

const pm1=new Promise(function(resolve,reject){resolve('resolve-01')
})
pm.then(function(value){console.log(value)return value+'-02'
}).then(function(value){console.log(value)return value+'-03'
}).then(function(value){console.log(value)
})

输出结果

resolve-01
resolve-01-02
resolve-01-02-03

上面的代码使用then方法,依次指定了两个回调函数。第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数,第二个回调函数完成以后,会把返回值作为参数出入给第三个回调函数;依次直至结束。

如果前一个回调函数返回的是Promise对象,这个时一个回调函数就会等待该Promise对象有了运行结果才进一步调用

const pmFun=(param)=>{return new Promise((resolve,reject)=>{setTimeout(()=>{if(param<100){resolve('输入值<100,传入值为:'+param)}else{reject('输入值>100,传入值为:'+param)}},2000)})
}
pmFun(50).then((resp)=>{console.log('then-1',resp)return pmFun(83)
}).then((resp)=>{console.log('then-2',resp)
})

输出结果:

输入值<100,传入值为:50
输入值<100,传入值为:82

Promisei的这种设计使得嵌套的异步操作,可以被很容易得到改写,从回调函数的“横向发展”改为“向下发展”。

3.2 Promise.prototype.catch方法:捕捉错误

Promise.prototype.catch方法是Promise.prototype.then(null,rejection)的别名,用于指定发生错误时回调函数。

const pmFun=(param)=>{return new Promise((resolve,reject)=>{setTimeout(()=>{if(param<100){resolve('输入值<100,传入值为:'+param)}else{reject('输入值>100,传入值为:'+param)}},2000)})
}
pmFun(50).then((resp)=>{console.log('then-1',resp)return pmFun(83)
}).then((resp)=>{console.log('then-1',resp)
}).catch((resp)=>{console.log('catch',resp)
})

Promise对象的错误具有“冒泡”性质,会一直向后传递,直到被捕捉为止,也就是说,错误总是会被下一个catch语句捕捉。

3.3 Promise.race方法:捕捉错误

Promise.race()方法允许我们同时发起多个异步操作,并在其中一个操作解决(fulfilled)或拒绝(rejected)时得到结果。它的语法如下:

Promise.race([promise1,promise2,..])

其中,promise1,promise2等为Promise对象数组。新的Promise的状态将与第一个解决或拒绝的Promise的状态相同。

const p1=new Promise((resolve,reject)=>{setTimeout(resolve,2000,'one')
})
const p2=new Promise((resolve,reject)=>{setTimeout(resolve,1000,'two')
})
const p3=new Promise((resolve,reject)=>{setTimeout(resolve,3000,'three')
})
const p3=new Promise((resolve,reject)=>{setTimeout(resolve,3000,'three')
})
Promise.race([p1,p2,p3]).then((resp)=>{console.log('then',resp)
}).catch((resp)=>{console.log('catch',resp)
})

运行结果

then two

race函数返回一个Promise,它将与第一个传递的promise相同的完成方式被完成。它可以是完成(resolves),也可以是失败(rejects),这要取决第一个完成的方式是两个中的哪个。

如果传的迭代是空的,则返回的 promise 将永远等待。

如果迭代包含一个或多个非承诺值和/或已解决/拒绝的承诺,则 Promise.race 将解析为迭代中找到的第一个值。

race在遇见立即执行的reject时并没有像any一样继续等待resolve的返回,而是直接返回了reject的内容。

3.4 Promise.any()

Promise.any()接收一个由Promise所组成的可迭代iterable对象,该方法会返回一个新的promise,一旦迭代对象内的任意一个promise变成了兑现状态,那么由该方法所有返回的promise就会变成兑现状态,并且它的兑现值就是可迭代对象内的首先兑现的promise的兑现值。

如果可迭代对象内的promise最终都没有兑现(即所有 promise 都被拒绝了),,那么该方法所返回的 promise 就会变成拒绝状态,并且它的拒因会是一个 AggregateError 实例,这是 Error 的子类,用于把单一的错误集合在一起。

const p1=new Promise((resolve,reject)=>{setTimeout(resolve,2000,'one')
})
const p2=new Promise((resolve,reject)=>{setTimeout(resolve,1000,'two')
})
const p3=new Promise((resolve,reject)=>{setTimeout(resolve,3000,'three')
})
const p4=new Promise((resolve,reject)=>{reject('P4->reject')
})
Promise.race([p1,p2,p3,p4]).then((resp)=>{console.log('then',resp)
}).catch((resp)=>{console.log('catch',resp)
})
tren,two

只要参数实例有一个变成fulfilled状态,包装实例就会变成fulfilled状态;如果所有参数实例都变成rejected状态,包装实例就会变成rejected状态。

Promise.any()Promise.race()方法很像,只有一点不同,就是Promise.any()不会因为某个Promise变成rejected状态而结束,必须等到所有参数Promise变成rejected状态才会结束。

3.5 Promise.all()

Promise.all()方法接收一个 Promise的iterable类型的输入。并且只返回一个Promise实例,那个输入的所有promise的resolve回调的结果是一个数组。

Promise的resolve回调执行是在所有输入的promise的resolve回调都结束,或者输入的iterable里没有promise了的时候。

它的reject回调执行时,只要任何一个输入的promise的reject回调执行或者执行或者输入不合格的promise就会立即抛出错误,并且reject的是第一个抛出的错误信息。

var p1 = new Promise((resolve, reject) => {setTimeout(resolve, 1000, 'p1->one');
});
var p2 = new Promise((resolve, reject) => {setTimeout(resolve, 2000, 'p2->two');
});
var p3 = new Promise((resolve, reject) => {setTimeout(resolve, 3000, 'p3->three');
});
var p4 = new Promise((resolve, reject) => {setTimeout(resolve, 4000, 'p4->four');
});
var p5 = new Promise((resolve, reject) => {reject('reject');
});Promise.all([p1, p2, p3, p4, p5]).then(values => {console.log(values);
}, reason => {console.log(reason)
});
then ['p1->one','p2->two','p3->three','p4->four']

Promise.all()主要应用需要所有异步任务都同时进行并且完成时可以使用all方法。

3.6 Promise.allSettled()

Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的pronise,并带有一个对象数组,每个对象表示对应的promise结果。

当您有多个彼此不依赖的异步任务成功完成时,或者您总是想知道每个promise的结果时,通常使用它。

相比之下,Promise.all()更适合彼此相互依赖或者在其中任何一个reject时立即结束。

var p1 = new Promise((resolve, reject) => {setTimeout(resolve, 4000, 'p1->one');
});
var p2 = new Promise((resolve, reject) => {setTimeout(resolve, 3000, 'p2->two');
});
var p3 = new Promise((resolve, reject) => {setTimeout(resolve, 2000, 'p3->three');
});
var p4 = new Promise((resolve, reject) => {setTimeout(resolve, 1000, 'p3->four');
});
var p5 = new Promise((resolve, reject) => {reject('p5->reject');
});Promise.allSettled([p1, p2, p3, p4, p5]).then(values => {console.log(values);
}, reason => {console.log(reason)
});
then [{status:'fulfilled',value:'p1->one'},{status:'fulfilled',value:'p2->two'},{status:'fulfilled',value:'p3->three'},{status:'fulfilled',value:'p4->four'},{status:'rejected',value:'p5->reject'}]

一旦所指定的 promises 集合中每一个 promise 已经完成,无论是成功的达成或被拒绝,未决议的 Promise将被异步完成。那时,所返回的 promise 的处理器将传入一个数组作为输入,该数组包含原始 promises 集中每个 promise 的结果。

对于每个结果对象,都有一个 status 字符串。如果它的值为 fulfilled,则结果对象上存在一个 value 。如果值为 rejected,则存在一个 reason 。value(或 reason )反映了每个 promise 决议(或拒绝)的值。

可以发现和all相比,allSettled在其中一个promise返回错误时还可以继续等待结果。并且不管内部的计时器定时多少毫秒,它都会等所有结果返回后按照传参传入的顺序返回promise结果。

四、总结

根据不同场景选择 Promise.all、Promise.race、Promise.allSettled 和 Promise.any 四个方法合适的使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/162015.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第三节-Android10.0 Binder通信原理(三)-ServiceManager篇

1、概述 在Android中&#xff0c;系统提供的服务被包装成一个个系统级service&#xff0c;这些service往往会在设备启动之时添加进Android系统&#xff0c;当某个应用想要调用系统某个服务的功能时&#xff0c;往往是向系统发出请求&#xff0c;调用该服务的外部接口。在上一节…

广告机/商业显示屏_基于MT878安卓主板方案

安卓主板在广告机领域扮演着重要的角色。无论是在商场、车站、酒店、电梯、机场还是高铁站&#xff0c;LED广告机广泛应用&#xff0c;并通过不同方式进行播放和管理。 广告机/商业显示屏_基于MT878安卓主板方案 基于MT8788安卓主板方案的广告机采用了联发科MT8788八核芯片方案…

对比两个数组中对应位置的两个元素将每次对比的最大值用于构成新的数组np.maximum()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 对比两个数组中对应位置的两个元素 将每次对比的最大值用于构成新的数组 np.maximum() 选择题 以下代码的输出结果为&#xff1f; import numpy as np a1 [1,2,33] a2 [11,2,3] print("…

Axios 默认配置 简化URL 简化代码 多台服务器接口配置

main.js配置 import Axios from axios Axios.defaults.method GET//设置默认的请求类型 Axios.defaults.baseURL https://apis.jxcxin.cn/api//设置接口地址 Axios.defaults.params { token: abc } //每次请求都带上这个参数 Axios.defaults.timeout 5000 //请求的超时时间…

MATLAB - text的两种使用方法

text小技巧 1. 常规使用&#xff08;Method 1&#xff09;2. 在显示画面的相对位置&#xff08;Method 2&#xff09;3. 举个例子 1. 常规使用&#xff08;Method 1&#xff09; text(x,y,txt)2. 在显示画面的相对位置&#xff08;Method 2&#xff09; text(string,‘ABC’,…

使用websocket获取thingsboard设备的实时数据

背景 有一个读者前来咨询,如何实时获取设备的遥测数据。 其实tb是有提供websocket接口来获取设备数据的。而且还支持js跨域调用。下面给大家演示一下。 websocket地址 完整代码 <!DOCTYPE HTML> <html><h

HTTP协议和WebSocket协议之间的区别

HTTP协议和WebSocket协议之间的主要区别在于它们的设计目的和通信方式。 HTTP协议是一种无状态的协议&#xff0c;它的主要设计目的是用于从Web服务器传输超文本到本地浏览器的传输协议。HTTP协议使用请求和响应模型&#xff0c;客户端向服务器发送请求&#xff0c;服务器返回…

【Java并发编程十二】线程池

线程池 用来统一地管理线程&#xff0c;避免线程的重复创建与销毁。使用线程池可以让执行完的线程回到线程池&#xff0c;等待下一次调用。 import jdk.jshell.EvalException; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import j…

Matplotlib颜色条的配置_Python数据分析与可视化

Matplotlib颜色条配置 基本颜色颜色条选择配色方案颜色条刻度的限制与扩展功能的设置离散型颜色条 基本颜色 Matplotlib提供了8种指定颜色的方法&#xff1a; 在[0&#xff0c;1]中的浮点值的RGB或RGBA元组&#xff08;例如 (0.1, 0.2, 0.5) 或&#xff08;0.1&#xff0c; 0.…

C语言中文网 - Shell脚本 - 9

第1章 Shell基础(开胃菜) 9. Shell修改命令提示符 Shell 通过PS1和PS2这两个环境变量来控制提示符的格式,修改PS1和PS2的值就能修改命令提示符的格式。 PS1 控制最外层的命令提示符格式。 PS2 控制第二层的命令提示符格式。 在修改 PS1 和 PS2 之前,我们先用 echo 命令输出…

contos7中mongodb数据库无法备份与还原,数据库工具的安装

由于之前数据库没有卸载干净&#xff0c;导致直接用sudo yum install -y mongodb-org-tools命令无法直接安装&#xff0c;只能选择手动安装了。 先去官网找到mongo-tool工具 MongoDB Database Tools Downloads | MongoDB 然后复制要下载的版本的地址。 然后直接用wget来下载 …

【每日OJ —— 622. 设计循环队列】

每日OJ —— 622. 设计循环队列 1.题目&#xff1a;622. 设计循环队列2.解法2.1.解法讲解2.1.1.算法讲解2.1.2.代码实现2.1.3.提交通过展示 1.题目&#xff1a;622. 设计循环队列 2.解法 1.本题有很多解法&#xff1a;可以使用数组&#xff0c;单链表&#xff0c;双链表&#x…

2023亚太杯数学建模赛题人工精准翻译

大家好&#xff0c;亚太杯今天早上6点已经开赛啦&#xff0c;然后我在这里给大家带来赛题的精准人工翻译&#xff0c;防止大家直接用软件翻译导致某些地方乱码或者翻译不精准&#xff0c;这会导致后续做题过程出现很大偏差。 注意&#xff0c;以下翻译均免费发放word形式的哈&…

【精选】CSS入门必看知识点大合集

CSS简介 CSS概念 CSS&#xff08;Cascading Style Sheets&#xff09;层叠样式表&#xff0c;又叫级联样式表&#xff0c;简称样式表 CSS文件后缀名为.css CSS用于HTML文档中元素样式的定义 为什么需要CSS 使用css的唯一目的就是让网页具有美观一致的页面 语法 CSS 规则…

DB2—03(DB2中常见基础操作)

DB2—03&#xff08;DB2中常见基础操作&#xff09; 1. 前言1.1 oracle和mysql相关 2. db2中的"dual"2.1 SYSIBM.SYSDUMMY12.2 使用VALUES2.3 SYSIBM.SYSDUMMY1 "变" dual 3. db2中常用函数3.1 nvl()、value()、COALESCE()3.2 NULLIF() 函数3.3 LISTAGG() …

论文《Unsupervised Dialog Structure Learning》笔记:详解DD-VRNN

D-VRNN模型和DD-VRNN模型 总体架构 离散-可变循环变分自编码器&#xff08;D-VRNN&#xff09;和直接-离散-可变循环变分自编码器&#xff08;DD-VRNN&#xff09;概述。D-VRNN和DD-VRNN使用不同的先验分布来建模 z t z_t zt​之间的转换&#xff0c;如红色实线所示。 x t x_t…

Rust错误处理:Result

文章目录 简介错误匹配 Rust基础教程&#xff1a; 初步⚙ 所有权⚙ 结构体和枚举类⚙ 函数进阶⚙ 泛型和特征⚙ 并发和线程通信⚙ cargo包管理⚙ 可空类型Option Rust进阶教程&#xff1a; 用宏实现参数可变的函数⚙ 类函数宏 简介 Rust中没有提供类似try…catch之类…

qt双击treeview节点之后,完成编辑,获取完成编辑得信号

Qt 中&#xff0c;要获取 QTreeView 节点完成编辑的信号&#xff0c;您可以使用 QTreeView 的 doubleClicked 信号以及重写相应的编辑触发函数。通常情况下&#xff0c;完成编辑后会触发 closeEditor 信号。 以下是一个示例代码&#xff0c;演示了如何实现这个功能&#xff1a…

【亚太杯思路助攻】2023年第十三届APMCM亚太地区大学生数学建模竞赛——(文末领取方式)

2023年第十三届APMCM亚太地区大学生数学建模竞赛——正式开赛&#xff01;&#xff01;&#xff01; 赛题已由高分雅思学姐翻译完成&#xff0c;我们的O奖学长也在第一时间分析了赛题&#xff0c;帮助大家最快时间&#xff0c;选择最适合是自己的赛题。 B题 C题 祝各位小伙伴都…