Promise在各种场景的使用（Promise.all、Promise.allSettled、Promise.race、Promise.any）

1、共有三个接口，接口二要根据接口一返回的数据判断是否执行，接口二需要接口一的返回值作为参数；接口三要根据接口二返回的数据判断是否执行，接口三需要接口二的返回值作为参数。

const getCatalogue = function (id) {return new Promise((resolve, reject) => {console.log('接口一');resolve({result: true, text: 1});// 在接口返回的值里加上 result=true,要确保result跟接口返回的字段不会重名})}
const getWattHourMeter = function (id) {return new Promise((resolve, reject) => {console.log('接口二');resolve({result: true, text: 2});// 在接口返回的值里加上 result=true})
}
const getConsumption = function (id) {return new Promise((resolve, reject) => {console.log('接口三');resolve({result: true, text: 3});// 在接口返回的值里加上 result=true})
}getCatalogue('one').then((res) => {console.log(11, res)// 判断下一个接口是否运行if (false) {console.log(11, 'if')return Promise.resolve({result: false, id: 1});// 返回状态为已完成的Promise，这样会进入每一个then，在下一个步根据result判断then里面的代码要不要执行} else {return getWattHourMeter('two')}
}).then((res) => {console.log(22, res)if (!(typeof res == 'object' && res.result != null && res.result === false)) {// result为false不执行，这个时候需要主要接口返回的res是不是对象// 判断下一个接口是否运行if (false) {console.log(22, 'if')return Promise.resolve({result: false, id: 2});} else {return getConsumption('three')}} else {// 第二步不执行的时候还是得返回值，要不然第三步的res为会undefined，如果第三步判断了res是否为undefined也可以不写return Promise.resolve({result: false, id: 2});}
}).then((res) => {console.log(33, res)// 还是根据result判断是不是要继续执行if (!(typeof res == 'object' && res.result != null && res.result === false)) {//数据操作console.log(33, '执行数据操作');}
}).catch((e) => {console.log(e, 'catch');//这样所有的报错信息都会进入catch
})

2、共有两个接口，需要等两个接口都成功的返回数据之后再进行操作，其中任何一个接口报错都无法继续。

Promise.all 里面参数为一个数组，数组的每一项是一个返回promise 的函数调用。
then 的第一个参数是所有promise都成功的调用，返回结果是一个数组，数组的每一项为函数promise 的返回结果。
then 的第二个参数：返回结果有一个失败则执行失败的回调，拿到的是第一个失败的值。

Promise.all([fn(),fn()]) 都返回resolve(); 才能够拿到成功的返回值
Promise.all([fn(),fn()]) 有一个返回reject(), 则进入catch(error), 拿到失败的返回值

const apiOne = function (id) {return new Promise((resolve, reject) => {resolve({result: true, text: 1});})
}const apiTwo = function (id) {return new Promise((resolve, reject) => {resolve({result: true, text: 2});})
}Promise.all([apiOne('one'), apiTwo('two')]).then(result => {console.log(result, 'result');}, error => {// 任何一个报错都会进入这里console.log(error, 'error');
})

3、共有两个接口，需要等两个接口都成功的返回数据之后再进行操作，但如果其中一个接口报错，不能影响另一个接口的数据。

3.1 使用Promise.all

const apiOne = function (id) {return new Promise((resolve, reject) => {resolve({result: true, text: 1});}).catch(error => {return error;// 捕获error并返回error，这样即使报错，也还是会进入all的then方法})
}const apiTwo = function (id) {return new Promise((resolve, reject) => {reject({result: true, text: 2});}).catch(error => {return error;// 捕获error并返回error，这样即使报错，也还是会进入all的then方法})}Promise.all([apiOne('one'), apiTwo('two')]).then(result => {console.log(result, 'result');}, error => {console.log(error, 'error');
})

3.2 使用Promise.allSettled

Promise.allSettled里面参数为一个数组，数组的每一项是一个返回promise 的函数调用。

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

const apiOne = function(id) {return new Promise((resolve, reject) => {resolve({result: true, text: 1});});
}const apiTwo = function(id) {return new Promise((resolve, reject) => {reject({result: true, text: 2});});
}Promise.allSettled([apiOne('one'), apiTwo('two')]).then(result => {console.log(result, 'result');
}, error => {console.log(error, 'error');
})

4、共有两个接口，任何一个接口先完成就可以，无论是成功还是报错。

Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个 promise 解决或拒绝，返回的 promise 就会解决或拒绝。

Promise.race 里面参数为一个数组，数组的每一项是一个返回promise 的函数调用。

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

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

const apiOne = function (id) {return new Promise((resolve, reject) => {setTimeout(() => {resolve({result: true, text: 1});}, 1000)})
}const apiTwo = function (id) {return new Promise((resolve, reject) => {setTimeout(() => {resolve({result: true, text: 2});}, 2000)})
}Promise.race([apiOne('one'), apiTwo('two')]).then(result => {console.log(result, 'result');}, error => {console.log(error, 'error');
})

5、共有两个接口，只处理第一个成功执行的函数。

Promise.any() 接收一个Promise可迭代对象，只要其中的一个 promise 成功，就返回那个已经成功的 promise 。如果可迭代对象中没有一个 promise 成功（即所有的 promises 都失败/拒绝），就返回一个失败的 promise 和AggregateError类型的实例，它是 Error 的一个子类，用于把单一的错误集合在一起。本质上，这个方法和 Promise.all() 是相反的。

const apiOne = function (id) {return new Promise((resolve, reject) => {setTimeout(() => {reject({result: true, text: 1});}, 1000)})
}const apiTwo = function (id) {return new Promise((resolve, reject) => {setTimeout(() => {resolve({result: true, text: 2});}, 2000)})
}Promise.any([apiOne('one'), apiTwo('two')]).then(result => {console.log(result, 'result');}, error => {console.log(error, 'error');
})

Promise在各种场景的使用（Promise.all、Promise.allSettled、Promise.race、Promise.any）相关推荐

promise链式调用_这一次，彻底弄懂 Promise
Promise 必须为以下三种状态之一:等待态(Pending).执行态(Fulfilled)和拒绝态(Rejected).一旦Promise 被 resolve 或 reject,不能再迁移至其他任 ...
promise的优点promise.all(),promise.race(),promise.allSettled()的原理
Promise也是使用回调函数,只不过是把回调封装在了内部,使用上一直通过 then 方法的链式调用,使得多层的回调嵌套看起来变成了同一层的,书写上以及理解上会更直观和简洁一些.Promise出现之前 ...
js实现promise.all promise.race promise.resolve
最近在准备面试,关于 promise 是面试的热点和考点.不定面试官心情好了就会让你写个 promise 的 api 废话不多说,下面是我写的代码,如有不严谨之处希望指出. promise.all 当 ...
使用promise解决回调地狱_回调地狱的由来和如何利用promise解决回调地狱
var fs =require('fs') fs.readFile('./a.txt', 'utf8',function(err,data){ if(err){ console.log('读取失败') ...
Promise应用场景总结
场景描述在我最近的开发中,遇到了下面几个场景: 一个区块的渲染需要拉取多个接口,如何摆脱闪屏,保证良好的保证用户体验? 接口的数据量巨大,处理逻辑臃肿,代码混乱,后续维护难怎么办? 业务逻辑特殊,如 ...
漫谈promise使用场景
深入理解promise 对于现在的前端同学来说你不同promise你都不好意思出门了.对于前端同学来说promise已经成为了我们的必备技能. 那么,下面我们就来说一说promise是什么,它能帮助我 ...
ES6中的Promise详解
Promise 在 JavaScript 中很早就有各种的开源实现,ES6 将其纳入了官方标准,提供了原生 api 支持,使用更加便捷. 定义 Promise 是一个对象,它用来标识 JavaScri ...
promise 和 async await区别
什么是Async/Await? async/await是写异步代码的新方式,以前的方法有回调函数和Promise. async/await是基于Promise实现的,它不能用于普通的回调函数. as ...
Javascript 中的神器——Promise
回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力.而 Promise 很好地解决了这一切 Promise概念所谓 Promise,就是ES6原生提供的一个对象, ...

Promise在各种场景的使用（Promise.all、Promise.allSettled、Promise.race、Promise.any）

Promise在各种场景的使用（Promise.all、Promise.allSettled、Promise.race、Promise.any）相关推荐

最新文章

热门文章