广州网站建设服务,室内装修设计师怎么样,建设局官方网站,申请自媒体账号入口文章目录 一、前言二、Promise.all()1#xff0c;第一句#xff1a;Promise.all()方法接受一个数组作为参数#xff0c;且每一个都是 Promise 实例2#xff0c;第二句#xff1a;如果不是#xff0c;就会先调Promise.resolve方法#xff0c;将参数转为 Promise 实例再进… 文章目录 一、前言二、Promise.all()1第一句Promise.all()方法接受一个数组作为参数且每一个都是 Promise 实例2第二句如果不是就会先调Promise.resolve方法将参数转为 Promise 实例再进一步处理3第三句Promise.all()方法的参数可以不是数组但必须具有 Iterator 接口且返回的每个成员都是 Promise 实例 三、Promise.race()四、总结 一、前言
谈谈你对Promise的理解
答Promise用来解决异步回调问题由于js是单线程的很多异步操作都是依靠回调方法实现的这种做法在逻辑比较复杂的回调嵌套中会相当复杂也叫做回调地狱 promise用来将这种繁杂的做法简化让程序更具备可读性可维护性promise内部有三种状态pendingfulfilledrejectedpending表示程序正在执行但未得到结果即异步操作没有执行完毕fulfilled表示程序执行完毕且执行成功rejected表示执行完毕但失败这里的成功和失败都是逻辑意义上的并非是要报错。其实promise和回调函数一样都是要解决数据的传递和消息发送问题promise中的then一般对应成功后的数据处理catch一般对应失败后的数据处理。 (1) All方法
他是Promise对象中的方法 他是一次执行多个promise;
(2) race方法
他也是Promise对象中的方法 他是执行最快的那个promiseAll方法可以触发多个 他只是触发一个 但是在多个promise中做出一个选择选择出一个运行最快的promise
二、Promise.all()
Promise.all()方法用于将多个 Promise 实例包装成一个新的 Promise 实例。
const p Promise.all([p1, p2, p3]);上面代码中Promise.all()方法接受一个数组作为参数p1、p2、p3都是一个 Promise 实例如果不是就会先调Promise.resolve方法将参数转为 Promise 实例再进一步处理。另外Promise.all()方法的参数可以不是数组但必须具有 Iterator 接口且返回的每个成员都是 Promise 实例。
该怎么理解这句话呢下面将逐句说明
1第一句Promise.all()方法接受一个数组作为参数且每一个都是 Promise 实例
这句话说明了 Promise的标准用法
即传入一个数组期望数组里面的每一项都是一个promise实例如下使用 ## 1,先定义几个异步函数,此处用定时器 let p1 new Promise((resolve, reject) {setTimeout(function () {resolve(success_1);}, 1000);});let p2 new Promise((resolve, reject) {setTimeout(function () {resolve(success_2);}, 2000);});let p3 new Promise((resolve, reject) {setTimeout(function () {resolve(success_3);}, 3000);});## 2使用Promise.all([p1, p3, p2]).then((result) {console.log(result); // 结果为[success_2, success_3, success_1]}).catch((error) {console.log(error); });等待几秒后结果打印为
[success_2, success_3, success_1]Promise.all接收到的数组顺序是一致的即p3的结果在p2的前面即便p3的结果获取的比p2要晚这带来了一个很大的好处
在前端开发请求数据的过程中偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景使用Promise.all毫无疑问可以解决这个问题 Promise.all 里面所有的promise都执行成功fulfilled状态才会返回成功的数组只要有一个失败reject就会被catch回调捕获如下失败的情况 let p1 new Promise((resolve, reject) {setTimeout(function () {resolve(success_1);}, 1000);});let p2 new Promise((resolve, reject) {setTimeout(function () {resolve(success_2);}, 2000);});## 1失败的promsielet p3 Promise.reject(失败);## 2执行Promise.all([ p1,p2,p4]).then((result) {console.log(result);}).catch((error) {console.log(error:,error); // 失败了打印 失败});
执行结果如下
error:失败说明只要其中有一个失败就返回失败数据
注意如果作为参数的 Promise 实例自己定义了catch方法那么它一旦被rejected并不会触发Promise.all()的catch方法。
请务必记住promise.all 接收的promise数组是按顺序且同步执行的 2第二句如果不是就会先调Promise.resolve方法将参数转为 Promise 实例再进一步处理
如果我们传入的数组项不是promsie对象还会正常执行吗
1传入的数组每一项都不是 promise实例 ## 直接传 几个number类型Promise.all([1, 2, 3]).then((res) {console.log(res:, res); // [1,2,3]}).catch((err) {console.log(err:, err);});执行结果
[1,2,3]可以看出如果传入数组中的每一项都不是 promise对象 则会原封不动的让 resolve()函数返回 既拿到什么就返回什么
2第二种传入的数组中既有promise实例 也有不是的
如下我传了number 1,2 和两个promise实例 p2p1; let p1 new Promise((resolve, reject) {setTimeout(function () {resolve(success_1);}, 1000);});let p2 new Promise((resolve, reject) {setTimeout(function () {resolve(success_2);}, 2000);});Promise.all([1, 2, p2, p1]).then((res) {console.log(res——2:, res); // [1, 2, success_2, success_1]}).catch((err) {console.log(err:, err);});
执行结果 [1, 2, success_2, success_1]可以看出执行的顺序是先返回非promise 再执行p2p1这两个promise对象然后也按照顺序并返回结果 3第三句Promise.all()方法的参数可以不是数组但必须具有 Iterator 接口且返回的每个成员都是 Promise 实例
怎么理解这句话呢说明all方法传入的不一定是数组还可能是支持遍历Iterator的其他数据结构那这个数据结构不就是ES6新增的 Set集合吗
概述Set集合 Set也是ES6的数据结构。特点是无序不重复它类似于数组但是成员的值都是唯一的没有重复的值。Set本身是一个构造函数用来生成Set数据结构Set函数可以接受一个数组作为参数用来初始化。 使用Promise.all()传入Set集合 let p1 new Promise((resolve, reject) {setTimeout(function () {resolve(success_1);}, 1000);});let p2 new Promise((resolve, reject) {setTimeout(function () {resolve(success_2);}, 2000);});let p3 new Promise((resolve, reject) {setTimeout(function () {resolve(success_3);}, 3000);});## 1,定义Set集合let myMap new Set([p2, p1, p3]); console.log(myMap:, myMap); // Set(3) {Promise, Promise, Promise}## 2,all方法传入Set集合Promise.all(myMap).then((myMapRes) {console.log(myMapRes:, myMapRes); // [success_2, success_1, success_3]}).catch((err) {console.log(err:, err);});执行结果
[success_2, success_1, success_3]可以看出执行的结果是和数组的方式是一样的
三、Promise.race()
Promise.race()方法同样是将多个 Promise 实例包装成一个新的 Promise 实例。
const p Promise.race([p1, p2, p3]);Promise.race是赛跑的意思也就是说Promise.race([p1, p2, p3])里面的结果哪个获取的快就返回哪个结果不管结果本身是成功还是失败。
使用场景: 有时我们比如说有好几个服务器的好几个接口都提供同样的服务我们不知道哪个接口更快就可以使用Promise.race哪个接口的数据先回来我们就用哪个接口的数据 代码如下 let p1 new Promise((resolve, reject) {setTimeout(function () {resolve(success_1);}, 1000);});let p2 new Promise((resolve, reject) {setTimeout(function () {resolve(success_2);}, 2000);});let p3 new Promise((resolve, reject) {setTimeout(function () {resolve(success_3);}, 3000);});## 调用race方法Promise.race([p2,p1,p3]).then(res{console.log(resRace:,res); // resRace: success_1}).catch(err{console.log(errRace:,err);})执行结果
resRace: success_1p1确实是执行最快的返回执行最快的那个promsie的resolve结果其他的promsie将不会再管了
当然如果最快的这个执行promsie失败了也是会走catch回调的
四、总结
promise.all 接收的promise数组总是按顺序且同步执行并返回的只要有一个promise失败,最终状态就是失败的reject就会被catch捕获。promise.race 也接收promise数组总是返回执行最快的那一个其他promise的状态并不关心。
