ES6 Promise all 和race的区别与实现
Promise 是ES6语法标准里的新定义，一般用来处理异步方法的同步执行。本文主要介绍Promise all和race的用法和实现。
区别：
promise all是等所有异步方法返回结果之后再继续后面操作，而 race是指哪个方法先最先结束，就返回该方法的结果。前者返回的是包含所有结果的数组，race返回的是最先执行结束并返回的那一个结果。
实现 all
加入有以下场景：我有5个异步方法，需要等到这5个方法执行结束之后再执行下一步，如果其中有一个出错，则进入到catch方法里。具体实现如下：
function promiseAll(arr){
return new Promise((resolve, reject) => {
const result = [];
let i = 0;
function next(promise){
if( i > arr.length - 1){
return resolve(result);
}
promise().then(res => {
const end = new Date().valueOf();
const diff = end - start;
console.log(i, diff)
result.push(res);
next(arr[++i]);
}).catch(err => {
return resolve(err);
})
}
next(arr[i]);
});
};
const promiseList = [1,2,3,4,5].map(one => {
return () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(one);
}, 1000);
})
}
});
const start = new Date().valueOf();
promiseAll(promiseList).then(res => {
const end = new Date().valueOf();
console.log(res, end - start)
});
// [1, 2, 3, 4, 5] 15000
对性能要求比较高的朋友会发现，这个是一个一个按顺序执行的，而且如果传进去的数组元素不是promise的话，会报错(没有then方法)。
并发执行实现方式如下：
function promiseAll(arr){
const result = [];
return new Promise((resolve, reject) => {
for(let i = 0; i < arr.length; i++){
let p = arr[i];
if(p instanceof Promise){
} else {
p = Promise.resolve(p);
}
p.then((res) => {
result[i] = res;
}).catch(err => {
return reject(err);
})
}
return resolve(result);
})
}
const input = [1,2,3,4,5];
promiseAll(input).then(res => {
console.log(res);
}).catch(error => {
console.log(error);
})
实现race:
(() => {
function race(promises){
return new Promise((resolve, reject) => {
for(let i = 0; i < promises.length; i ++){
let promise = promises[i];
if(!(promise instanceof Promise)){
promise = Promise.resolve(promise);
}
promise.then(res => {
return resolve(res);
}).catch(error => {
return reject(error);
})
}
})
}
const p1 = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1)
}, 2000)
})
};
const p2 = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2)
}, 1000)
})
}
race([p1(), p2()]).then(res => {
console.log("res", res) //2
})
})()
发表评论 (审核通过后显示评论)：