Comments (12)
/**
* Promise.all
* @description 当这个数组里的所有promise对象全部变为resolve状态的时候,才会resolve, 当有一个promise对象变为reject状态时,就不再执行直接 reject
* @param {*} values promise对象组成的数组作为参数
*/
Promise.prototype.all = (values)=>{
return new Promise((resolve,reject)=>{
let resultArr = []
let count = 0
let resultByKey = (value,index)=>{
resultArr[index] = value
if(++count === values.length){
resolve(resultArr)
}
}
values.forEach((promise,index)=>{
promise.then((value)=>{
resultByKey(value,index)
},reject)
})
})
}
from fe-interview.
1) 核心思路
- ①接收一个 Promise 实例的数组或具有 Iterator 接口的对象作为参数
- ②这个方法返回一个新的 promise 对象,
- ③遍历传入的参数,用Promise.resolve()将参数"包一层",使其变成一个promise对象
- ④参数所有回调成功才是成功,返回值数组与参数顺序一致
- ⑤参数数组其中一个失败,则触发失败状态,第一个触发失败的 Promise 错误信息作为 Promise.all 的错误信息。
2)实现代码
一般来说,Promise.all 用来处理多个并发请求,也是为了页面数据构造的方便,将一个页面所用到的在不同接口的数据一起请求过来,不过,如果其中一个接口失败了,多个请求也就失败了,页面可能啥也出不来,这就看当前页面的耦合程度了~
function promiseAll(promises) {
return new Promise(function(resolve, reject) {
if(!Array.isArray(promises)){
throw new TypeError(`argument must be a array`)
}
var resolvedCounter = 0;
var promiseNum = promises.length;
var resolvedResult = [];
for (let i = 0; i < promiseNum; i++) {
Promise.resolve(promises[i]).then(value=>{
resolvedCounter++;
resolvedResult[i] = value;
if (resolvedCounter == promiseNum) {
return resolve(resolvedResult)
}
},error=>{
return reject(error)
})
}
})
}
// test
let p1 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(1)
}, 1000)
})
let p2 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(2)
}, 2000)
})
let p3 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(3)
}, 3000)
})
promiseAll([p3, p1, p2]).then(res => {
console.log(res) // [3, 1, 2]
})
from fe-interview.
function all(promiseList) {
return new Promise((resolve, reject) => {
if(!promiseList || !promiseList.length) return resolve([])
let count = 0
let length = promiseList.length
let result = []
for (let i = 0; i < length; i++) {
Promise.resolve(promiseList[i]).then(value => {
result[count++] = value
if(count === length) resolve(result)
}, reason => {
reject(reason)
})
}
})
}
function race(promiseList) {
return new Promise((resolve, reject) => {
if(!promiseList || !promiseList.length) return resolve()
let length = promiseList.length
for (let i = 0; i < length; i++) {
Promise.resolve(promiseList[i]).then(value => {
resolve(value)
}, reason => {
reject(reason)
})
}
})
}
function allSettled(promiseList) {
return new Promise((resolve, reject) => {
if(!promiseList || !promiseList.length) return resolve([])
let count = 0
let length = promiseList.length
let result = []
for (let i = 0; i < length; i++) {
Promise.resolve(promiseList[i]).then(value => {
result[count++] = {
value,
status: 'fulfilled'
}
if(count === length) resolve(result)
}, reason => {
result[count++] = {
reason,
status: 'rejected'
}
if(count === length) resolve(result)
})
}
})
}
var promiseList = new Array(3).fill(0).map((item, index) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(index)
}, index * 1000)
})
})
Promise.all(promiseList).then(list => {
console.log(list)
})
all(promiseList).then(list => {
console.log(list)
})
Promise.race(promiseList).then(list => {
console.log(list)
})
race(promiseList).then(value => {
console.log(value)
})
Promise.allSettled(promiseList).then(list => {
console.log(list)
})
allSettled(promiseList).then(list => {
console.log(list)
})
from fe-interview.
Promise.all = function (promises) {
return new Promise((resolve, reject) => {
if (!Array.isArray(promises)) {
throw new Error('argument must be a array');
}
// 用来记录Promise成功的次数
let resolveCount = 0,
// 用来保存Promise成功的结果
resolveDataList = [];
for (let index = 0, len = promises.length; index < len; index++) {
const p = promises[index];
Promise.resolve(p).then(data => {
resolveDataList[index] = data;
// promise成功次数等于promises数组长度,则成功
if (++resolveCount === len) {
resolve(resolveDataList);
}
// 有一个失败就失败
}, reject);
}
});
}
Promise.race = (promises = []) => {
return new Promise((resolve, reject) => {
if (!Array.isArray(promises)) {
throw new TypeError(`argument must be a array`);
}
for (const p of promises) {
// 有一个成功就返回成功状态的promise
// 有一个失败就返回失败状态的promise
p.then(resolve, reject);
}
});
}
// Promise.finally() 最终的,无论如何finally中传递的回调函数 必须会执行,如果返回一个promise,会等待这个Promise执行完成
Promise.prototype.finally = function(callback){
return this.then(res => {
// 如果then方法返回一个Promise, 就会等待这个方法执行完毕,所以需要包装成Promise才能等待
return Promise.resolve(callback()).then(() => res);
}, err => {
return Promise.resolve(callback()).then(() => {
throw err;
})
});
}
let p1 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(1)
}, 1000)
})
let p2 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(2)
}, 2000)
})
let p3 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(3)
}, 3000)
})
Promise.all([p3, p1, p2]).then(res => {
console.log(res) // [3, 1, 2]
});
from fe-interview.
Promise.myAll = function (arr) {
const length = arr.length;
let result = new Array(length);
let count = 0;
let succeedCount = 0;
let resolveAllFn = null;
let rejectAllFn = null;
let someErr = null;
function addcount() {
count++;
if (count === length) {
succeedCount === length
? resolveAllFn(result)
: rejectAllFn(someErr)
}
}
for (const [i, p] of arr.entries()) {
Promise.resolve(p).then((res) => {
result[i] = res;
succeedCount++;
addcount();
}, (err) => {
someErr = err;
addcount();
})
}
return new Promise((rs, rj) => {
resolveAllFn = rs;
rejectAllFn = rj;
})
}
Promise.myAll([
new Promise(rs=>{
setTimeout(() => {
rs(0)
}, 1000);
}),
Promise.resolve(1),
]).then((res) => {
console.log(res);//[ 0, 1]
});
Promise.myAll([
new Promise((_, rj)=>{
setTimeout(() => {
rj(0)
}, 1000);
}),
Promise.resolve(1),
]).then(() => {},err=>{
console.log(err); //0
});
from fe-interview.
Promise.all = (...promises) => {
const results = [];
const merged = promises.reduce(
(acc, p) => acc.then(() => p).then(r => results.push(r)),
Promise.resolve(null));
return merged.then(() => results);
};
from: https://eddmann.com/posts/implementing-promise-all-and-promise-race-in-javascript/
from fe-interview.
Promise.all = async (promises) => {
const results = [];
for (promise of promises) {
results.push(await promise);
}
return results;
};
from fe-interview.
function all(promiseList) {
return new Promise((resolve, reject) => {
if(!promiseList || !promiseList.length) return resolve([])
let count = 0
let length = promiseList.length
let result = []
for (let i = 0; i < length; i++) {
Promise.resolve(promiseList[i]).then(value => {
result[count++] = value
if(count === length) resolve(result)
}, reason => {
reject(reason)
})
}
})
}
function race(promiseList) {
return new Promise((resolve, reject) => {
if(!promiseList || !promiseList.length) return resolve()
let length = promiseList.length
for (let i = 0; i < length; i++) {
Promise.resolve(promiseList[i]).then(value => {
resolve(value)
}, reason => {
reject(reason)
})
}
})
}
function allSettled(promiseList) {
return new Promise((resolve, reject) => {
if(!promiseList || !promiseList.length) return resolve([])
let count = 0
let length = promiseList.length
let result = []
for (let i = 0; i < length; i++) {
Promise.resolve(promiseList[i]).then(value => {
result[count++] = {
value,
status: 'fulfilled'
}
if(count === length) resolve(result)
}, reason => {
result[count++] = {
reason,
status: 'rejected'
}
if(count === length) resolve(result)
})
}
})
}
var promiseList = new Array(3).fill(0).map((item, index) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(index)
}, index * 1000)
})
})
Promise.all(promiseList).then(list => {
console.log(list)
})
all(promiseList).then(list => {
console.log(list)
})
Promise.race(promiseList).then(list => {
console.log(list)
})
race(promiseList).then(value => {
console.log(value)
})
Promise.allSettled(promiseList).then(list => {
console.log(list)
})
allSettled(promiseList).then(list => {
console.log(list)
})
from fe-interview.
const promiseAll = (promises) => {
const newPromise = new Promise(function (resolve, reject) {
if (!Array.isArray(promises)) reject(new Error('promises is not array'));
const promiseLength = promises.length;
let promiseResolveCount = 0;
let promiseResolveResult = [];
for (let promise in promises) {
Promise.resolve(promise).then(value => {
promiseResolveResult.push(value);
promiseResolveCount++;
if (promiseResolveCount === promiseLength) resolve(promiseResolveResult);
}, error => {
reject(error);
})
}
});
return newPromise;
}
// test
let p1 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(1)
}, 1000)
})
let p2 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(2)
}, 2000)
})
let p3 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(3)
}, 3000)
})
promiseAll([p3, p1, p2]).then(res => {
console.log(res) // [3, 1, 2]
})
from fe-interview.
async function promiseAll(ary = []) {
if (typeof ary[Symbol.iterator] !== 'function') {
throw new Error('尚未拥有Iterator接口')
}
const returnAry = []
try {
for (const val of ary) {
returnAry.push(await val)
}
return returnAry
} catch (err) {
console.log('all error:', err)
return err
}
}
let p1 = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(1)
}, 1000)
})
let p2 = new Promise(function(resolve, reject) {
setTimeout(function() {
// resolve(2)
reject('demo error test')
}, 2000)
})
let p3 = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(3)
}, 3000)
})
promiseAll([p3, p1, p2]).then(res => {
console.log(res) // [3, 1, 2]
})
from fe-interview.
Promise.all = promises => {
const executor = (resolve, reject) => {
const responses = [];
const success = res => {
responses.push(res);
if (responses.length === promises.length) resolve(responses);
};
promises.forEach(promise => promise.then(success, reject));
};
return new Promise(executor);
};
from fe-interview.
Promise.all = function (promises) {
return new Promise((resolve, reject) => {
let len = promises.length
const result = []
promises.forEach((promise, i) => {
Promise.resolve(promise).then((res) => {
len--
result[i] = res
if (len === 0) resolve(result)
}).catch(err => {
reject(err)
})
})
})
}
const promise1 = new Promise((resolve) => {
setTimeout(() => {
resolve(1)
}, 2000)
})
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(2)
}, 100)
})
Promise.all([promise1, promise2]).then(res => {
console.log(res)
}).catch(err => {
console.error(err)
})
from fe-interview.
Related Issues (20)
- Day378:说一下什么是 Http 协议无状态?怎么解决 Http 协议无状态?
- Day379:如果让你来实现一个前端监控系统,应该考虑什么?如何去实现?
- Day380:实现一个系统,统计前端页面性能、页面 JS 报错、用户操作行为、PV/UV、用户设备等消息,并进行必要的监控报警。方案如何设计,用什么技术点,什么样的系统架构,难点会在哪里? HOT 3
- Day381:说一下 JavaScript 严格模式下有哪些不同?
- Day382:说一下 setTimeout 和 setInterval 的区别,包含内存方面的分析?
- Day383:说下 React 的 useEffect、useCallback、useMemo HOT 2
- Day384:JavaScript 中如何实现一个类?怎么实例化这个类? HOT 2
- Day385:在一个 DOM 上同时绑定两个点击事件:一个用捕获,一个用冒泡。事件会执行几次?先执行冒泡还是捕获? HOT 9
- Day386:写一个通用的事件侦听器函数 HOT 3
- 定时函数 HOT 1
- 小程序不维护了吗? HOT 10
- --
- 小程序里面的内容还有其他地方能学习吗
- 求小程序哇!!不然学习效率太低了 HOT 1
- 现在还能在哪里看题目答案吗?小程序关闭了😭😭 HOT 1
- #### 1)为什么会有Event Loop
- > > > @Genzhen 请教一下大佬,如果在render里面结构赋值也会影响性能吗?比如 const { page, size } = this.state这种的? HOT 1
- 考察原型链
- issue路径错误,提不了pr,可见下图
- vue中&nextTick的原理
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fe-interview.