同期异步系列文章引荐
谈一谈javascript异步
javascript异步中的回调
javascript异步与promise
javascript异步之Promise.resolve()、Promise.reject()
javascript异步之Promise then和catch
javascript异步之async(一)
javascript异步之async(二)
javascript异步实战
javascript异步总结归档
本日我们继承议论promise
收集上关于PromiseAPI运用的文章不足为奇,为了坚持javascript异步系列文章的完整性,现在对promise的API举行简朴周全的引见
准备工作
我在easy-mock添加了三个接口,备用
依旧运用axios举行ajax要求
Promise.all()
Promise.all()有点像“并行”
我们看一个栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>promise</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
{
const p1 = axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise1')
.then(({
data
}) => {
console.log('p1胜利啦');
return data.data
})
const p2 = axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise2')
.then(({
data
}) => {
console.log('p2胜利啦');
return data.data
})
const p3 = axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/mock')
.then(({
data
}) => {
console.log('p3胜利啦');
return data.data
})
const p = Promise.all([p3, p1, p2])
.then(arr => {
console.log(arr);
console.log('Promise.all胜利啦');
})
.catch(err=>{
console.log(err,'Promise.all错啦');
})
}
</script>
</body>
</html>
我们晓得axios返回的是一个promise对象,我们能够看下
console.log(p1);
Promise.all就是用于将多个 Promise 实例,包装成一个新的 Promise 实例
Promise.all,吸收一个数组作为参数,数组的每一项都返回Promise实例
我们重点看这段代码
const p = Promise.all([p3, p1, p2])
.then(arr => {
console.log(arr);
console.log('Promise.all胜利啦');
})
.catch(err=>{
console.log(err,'Promise.all错啦');
})
p1,p2,p3都是返回promise实例,Promise.all不关心他们的实行递次,假如他们都返回胜利的状况,Promise.all则返回胜利的状况,输出一个数组,是这三个p1,p2,p3的返回值,数组的递次和他们的实行递次无关,和他们作为参数分列的递次有关
我们看下输出
为了是拉长接口三的返回时候我对接口三的数据举行了修正,返回值是长度1000-2000之间的随机数组,所以p3的实行要晚于p1和p2,
但我们输出的arr,p3依旧在前面,这给我们带来一个方便,返回值数组的递次和要领的实行递次无关,能够举行工资举行掌握
我们将p1做一下修改,使p1报错
const p1 = axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise1')
.then(({
data
}) => {
console.log('p1胜利啦');
return xxxx.data//将data.data修正为xxxx.data
})
假如有一个返回失利(reject),Promise.all则返回失利(reject)的状况,此时第一个被reject的实例的返回值,会传递给P的回调函数。
三个promise实例参数之间是“与”的关联,悉数胜利,Promise.all就返回胜利,有一个失利,Promise.all就返回失利
换个角度说,一个promise的实行效果依赖于别的几个promise的实行效果,
比方:
几个ajax悉数实行完了,才衬着页面,
几个ajax悉数实行完了,才做一些数据的盘算操纵,
不关心实行递次,只关心集体的实行效果
Promise.race()
Promise中的竞态,用法和Promise.all相似,对应参数的要乞降Promise.all雷同,传入一个数组作为参数,参数要返回一个Promise实例
race就是合作的意义,数组内的Promise实例,谁实行的快,就返回谁的实行效果,不管是胜利照样失利
const p = Promise.race([p3, p1, p2])
.then(res => {
console.log(res);
console.log('Promise.all胜利啦');
})
.catch(err=>{
console.log(err,'Promise.all错啦');
})
经由过程输出我们发明
p1是第一个完成的,所以p的返回效果就是p1的实行效果
而且就算完成,然则 历程不会马上住手,还会继承实行下去。
关于race的运用场景
搜了一下,许多文章都说是用来处理收集超时的提醒,相似于下面如许
const p3 = axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/mock')
.then(({
data
}) => {
console.log('p3胜利啦');
return data.data
})
const p4 = new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('收集连接超时')), 50)
})
const p = Promise.race([p3, p4])
.then(res => console.log(res))
.catch(err => console.log(err));
p3的ajax和50ms的定时器比较,看谁实行的快,假如凌驾了50ms,p3的ajax还没返回,就示知用户收集连接超时
这里有个题目,就算提醒超时了,p3还在继承实行,它并没有停下来,直到有状况返回
个人观点:race能够用来为ajax要求的时长规定局限,假如ajax要求时长凌驾xxxms会实行某个要领,或许ajax要求时长不凌驾xxms会实行某个要领,总之,race的运用空间不是很大
Promise.finally()
finally要领用于指定不管 Promise 对象末了状况怎样,都邑实行的操纵。该要领是 ES2018 引入规范的。
const p = Promise.race([p3, p4])
.then(res => console.log(res))
.catch(err => console.log(err))
.finally(() => {
console.log("finally的实行与状况无关")
});
当promise获得状况(不管胜利或失利)后就会实行finally,