JavaScript - promise.all()及实现

  • 用处:并行执行一系列异步操作,返回结果集。

|Promise.all(iterable)方法返回一个 [Promise],此实例在 iterable 参数内所有的 promise 都“完成(resolved)”或参数中不包含 promise 时回调完成(resolve);如果参数中 promise 有一个失败(rejected),此实例回调失败(reject),失败原因的是第一个失败 promise 的结果。

  • 特点:
    • 返回值将会按照参数内的 promise 顺序排列,而不是由调用 promise 的完成顺序决定。
    • 有一个出错,就被认定为失败。
    • 返回的是一个promise。
    • 参数是一个数组,而且期望每个都是promise,如果不是会直接放入结果集。
  • 了解了特点,可以初步得到设计思路
      1. promise.all()返回值是new Promise
      1. 需要用一个数组存放每一个promise的结果值
      1. 遍历参数数组,判断是否是promise,是的话执行得到结果后压入结果数组;否则直接放入结果数组。
      1. 当每个都成功执行后,resolve(result)
      1. 当有一个失败,reject
function isPromise(obj) {
    return !!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function';  
}

const myPromiseAll = (arr)=>{
    let result = [];
    return new Promise((resolve,reject)=>{
        for(let i = 0;i < arr.length;i++){
            if(isPromise(arr[i])){
                arr[i].then((data)=>{
                    result[i] = data;
                    if(result.length === arr.length){
                        resolve(result)
                    }
                },reject)
            }else{
                result[i] = arr[i];
            }
        }    
    })
}
  • 测试:
let p1 = Promise.resolve(3);
let p2 = 1337;
let p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
}); 
myPromiseAll([p1, p2, p3]).then(values => { 
  console.log(values); // [3, 1337, "foo"] 
}); 
  • 有一个操作失败情况

let p1 = new Promise((resolve, reject) => { 
    setTimeout(resolve, 1000, 'one'); 
}); 
let p2 = new Promise((resolve, reject) => { 
    setTimeout(resolve, 2000, 'two'); 
});
let p3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 3000, 'three');
});
let p4 = new Promise((resolve, reject) => {
    setTimeout(resolve, 4000, 'four');
});
let p5 = new Promise((resolve, reject) => {
    reject('reject');
});
  
myPromiseAll([p1, p2, p3, p4, p5]).then(values => { 
    console.log(values);
}, reason => {
    console.log(reason);// reject
});

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,814评论 1 56
  • JavaScript里通常不建议阻塞主程序,尤其是一些代价比较昂贵的操作,如查找数据库,下载文件等操作,应该用异步...
    张歆琳阅读 2,807评论 0 12
  • 含义 Promise是异步编程的一种解决方案,用于一个异步操作的最终完成(或失败)及其结果值的表示,比传统的回调函...
    nimw阅读 27,311评论 0 4
  • 前言 本文旨在简单讲解一下javascript中的Promise对象的概念,特性与简单的使用方法。并在文末会附上一...
    _暮雨清秋_阅读 2,304评论 0 3
  • 编后吐槽:写的快花眼,很详细,耐心看必受益匪浅 JavaScript的执行环境是「单线程」的。所谓单线程,是指JS...
    果汁凉茶丶阅读 4,755评论 8 27

友情链接更多精彩内容