第 153 题：实现一个批量请求函数 multiRequest(urls, maxNum)

[yygmind]

要求如下：

1. 要求最大并发数 maxNum
2. 每当有一个请求返回，就留下一个空位，可以增加新的请求
3. 所有请求完成后，结果按照 urls 里面的顺序依次打出

[leonwens]

// 我先来，模拟图片加载过程
function loadImg(url) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = function() {
        console.log(url, "加载完成");
        resolve(img);
      };
      img.onerror = function() {
        reject(new Error('Error at:' + url));
      };
      img.src = url;
    })
  }
  function multiRequest(urls, maxNum) {
    const firstMaxNum = urls.splice(0, maxNum);
    let promises = firstMaxNum.map((url, index)=>{
      return loadImg(url).then(()=>{
        return index
      })
    })
    return urls.reduce((res, cur)=>{
      return res.then(()=>{
        return Promise.race(promises)
      }).then((idx)=>{
        promises[idx] = loadImg(cur).then(()=>{
          return idx
        })
      })
    }, Promise.resolve()).then(()=>{
      return Promise.all(promises)
    })  
  }
multiRequest(urls, 4).then(()=>{
  console.log('finish')
})

[SupermanWY]

function multiRequest(urls, maxNum) {
  const ret = [];
  let i = 0;
  let resolve;
  const promise = new Promise(r => resolve = r);
  const addTask = () => {
    if (i >= arr.length) {
      return resolve();
    }

    const task = request(urls[i++]).finally(() => {
      addTask();
    });
    ret.push(task);
  }

  while (i < maxNum) {
    addTask();
  }

  return promise.then(() => Promise.all(ret));
}

// 模拟请求
function request(url) {
  return new Promise((r) => {
    const time = Math.random() * 1000;
    setTimeout(() => r(url), time);
  });
}

[NewPrototype]

通过count计数的形式，判断接口是否全部完成

class MultiRequest {
  constructor(props) {
    this.max = props.max || 10; //数量
    this.urls = props.urls || []; //接口
    this.count = 0; //总共完成数量
    this.result = []; //接口请求完成集合
    this.thenCbs = []; //调用then
    this.run(props.urls, 0); //初始化
  }
  add(url) {
    const taskLen = this.urls.filter(v => !isPromise(v));
    if (taskLen > this.max) {
      throw `最多支持${this.max}条`;
    }
    if (Array.isArray(url)) {
      this.run(url, this.urls.length);
      this.urls = [...this.urls, ...url];

      return true;
    }
    return false;
  }
  run(_urls, _urlsLen) {
    console.log(this.urls, _urls, _urlsLen, "------");
    _urls.forEach((v, _i) => {
      const _index = _i + _urlsLen;
      return v
        .then(res => {
          this.count++;
          this.result[_index] = res; 
          if (this.count === this.urls.length && this.thenCbs.length) {
            this.thenCbs.map(_cb => _cb(this.result));
            this.clear();
          }
        })
        .catch(error => {
          this.count++;
          this.result[_index] = error;
          console.log(error);
          if (this.count === this.urls.length && this.thenCbs.length) {
            this.thenCbs.map(_cb => _cb(this.result));
            this.clear();
          }
        });
    });
  }
  clear() {
    this.count = 0;
    this.result = [];
    this.thenCbs = [];
    this.urls = [];
  }
  then(cb) {
    this.thenCbs = [...this.thenCbs, ...[cb]];
    return this;
  }
}


const multiRequest = new MultiRequest({
  max: 10,
  urls: [
    loadImg("https://mirror-gold-cdn.xitu.io/168e096b62f70298fbd"),
    loadImg("https://mirror-gold-cdn.xitu.io/168e096b62f70298fbd"),
    loadImg("https://mirror-gold-cdn.xitu.io/168e096b62f70298fbd")
  ]
});
multiRequest.add([
  loadImg("https://mirror-gold-cdn.xitu.io/168e096b62f70298fbd")
]);
multiRequest.add([
  loadImg("https://mirror-gold-cdn.xitu.io/168e096b62f70298fbd")
]);
console.log(
  multiRequest.add([
    loadImg("https://mirror-gold-cdn.xitu.io/168e096b62f70298fbd")
  ])
);
console.log(
  multiRequest
    .then(_value => {
      console.log(_value, "---1");
    })
    .then(_value => {
      console.log(_value, "---1");
    }),
  "----multiRequest"
);

function isPromise(obj) {
  if (Promise && Promise.resolve) {
    return Promise.resolve(obj) === obj;
  }
  return false;
}

function loadImg(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = function() {
      console.log(url, "加载完成");
      resolve(img);
    };
    img.onerror = function() {
      reject(url);
    };
    img.src = url;
  });
}

[ron0115]

借鉴了一些题解的实现，用例跑通了，有问题或者可优化的话请各位大佬指正。

解题的关键是：队列和递归

代码如下

function handleFetchQueue(urls, max, callback) {
  const urlCount = urls.length;
  const requestsQueue = [];
  const results = [];
  let i = 0;
  const handleRequest = url => {
    const req = fetchFunc(url)
      .then(res => {
        results.push(res);
      })
      .catch(e => {
        results.push(e);
      })
      .finally(() => {
        const len = results.length;
        if (len < urlCount) {
          // 完成请求就出队
          requestsQueue.shift();
          handleRequest(urls[++i]);
        } else if (len === urlCount) {
          "function" === typeof callback && callback(results);
        }
      });
    requestsQueue.push(req);
    // 只要满足就继续请求
    if (requestsQueue.length <= max) {
      handleRequest(urls[++i]);
    }
  };
  handleRequest(urls[i]);
}

[lhiro]

const req = (url:string):Promise<any> => {
    return new Promise((resolve,reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('get',url,true); //这里第三个参数不能为false,会变成同步
        xhr.onload = () => {
            if(xhr.status === 200){
                resolve(url)
            }else{
                reject(url)
            }
        }
        xhr.send();
    })
}
const multiRequest = (urls:string[],maxNum:number):Promise<any> => {
    let i = 0;
    const ret:any = []; // 完成集合
    const executing:any = [];// 执行集合
    const enqueue = ():Promise<void> => {
        if(urls.length === i){ // 判断是否全部执行完
            return Promise.resolve();
        }
        const p = Promise.resolve().then(() => req(urls[i++]));
        ret.push(p); 
        const e = p.then(() => executing.splice(0,1));// 执行完从executin中剔除一个
        executing.push(e);

        let r = Promise.resolve();
        if(executing.length >= maxNum){// 判断executing中的长度是否大于等于限制数maxNum
            r = Promise.race(executing);
        }
        return r.then(() => enqueue());// 当 r = Promise.race 时会等到其中一个执行完才执行下一步
    }

    return enqueue().then(() => Promise.all(ret)) //全部执行完按顺序返回
}

multiRequest(Array.from({length:10},(u,i) => ('/api/test?' + i)),2)
.then(res => {
    console.log(res)   // ["/api/test?0", "/api/test?1", "/api/test?2", "/api/test?3", "/api/test?4", "/api/test?5", "/api/test?6", "/api/test?7", "/api/test?8", "/api/test?9"]
})

如果网络太好，建议将Network throttling 调成Fast 3G。

[myuanyuan]

class Scheduler {
constructor(count) {
this.count = count;
this.task = [];
this.executing = 0;
}
add(promiseCreator) {
this.task.push(() => promiseCreator());
this.executing < this.count && this.runTask();
}
runTask() {
if (this.task.length === 0) return;
this.executing++
this.task.splice(0, 1)0.then(() => {
this.executing--
this.runTask();
})
}
}

const timeout = (time) => new Promise((resolve, reject) => {
setTimeout(resolve, time);
})

function multiRequest(urls = [], maxNum = 1) {
let scheduler = new Scheduler(maxNum);
const addTask = (time, order) => {
scheduler.add(() => timeout(time).then(() => console.log(order)))
}
for (let i = 0; i < urls.length; i++) {
addTask(1000, urls[i]);
}
}

[wksmile]

借鉴了一些题解的实现，用例跑通了，有问题或者可优化的话请各位大佬指正。

解题的关键是：队列和递归

代码如下

function handleFetchQueue(urls, max, callback) {
  const urlCount = urls.length;
  const requestsQueue = [];
  const results = [];
  let i = 0;
  const handleRequest = url => {
    const req = fetchFunc(url)
      .then(res => {
        results.push(res);
      })
      .catch(e => {
        results.push(e);
      })
      .finally(() => {
        const len = results.length;
        if (len < urlCount) {
          // 完成请求就出队
          requestsQueue.shift();
          handleRequest(urls[++i]);
        } else if (len === urlCount) {
          "function" === typeof callback && callback(results);
        }
      });
    requestsQueue.push(req);
    // 只要满足就继续请求
    if (requestsQueue.length <= max) {
      handleRequest(urls[++i]);
    }
  };
}

这个不行吧，请求不是按顺序返回的，切要并发请求吧

// 我先来，模拟图片加载过程
function loadImg(url) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = function() {
        console.log(url, "加载完成");
        resolve(img);
      };
      img.onerror = function() {
        reject(new Error('Error at:' + url));
      };
      img.src = url;
    })
  }
  function multiRequest(urls, maxNum) {
    const firstMaxNum = urls.splice(0, maxNum);
    let promises = firstMaxNum.map((url, index)=>{
      return loadImg(url).then(()=>{
        return index
      })
    })
    return urls.reduce((res, cur)=>{
      return res.then(()=>{
        return Promise.race(promises)
      }).then((idx)=>{
        promises[idx] = loadImg(cur).then(()=>{
          return idx
        })
      })
    }, Promise.resolve()).then(()=>{
      return Promise.all(promises)
    })  
  }
multiRequest(urls, 4).then(()=>{
  console.log('finish')
})

res是请求链接，res.then鞋油问题吧

[ZangYuSong]

说白了，就是实现一个限制并发的 Promise.all

[ZangYuSong]

目前设定的是，当执行过程中某个 promise 返回 reject 则停止后续的 promise 执行。

后续可以加上，abort 请求。可以是一个回调，失败时候把 executing 传递过去。回调去执行一些操作。

// Promise.all([promsie1(), promsie2(), promsie3()]);
// PromiseLimit([promsie1, promsie2, promsie3]);
function PromiseLimit(funcArray, limit = 5) {
  let i = 0;
  const result = [];
  const executing = [];
  const queue = function() {
    if (i === funcArray.length) return Promise.all(executing);
    const p = funcArray[i++]();
    result.push(p);
    const e = p.then(() => executing.splice(executing.indexOf(e), 1));
    executing.push(e);
    if (executing.length >= limit) {
      return Promise.race(executing).then(
        () => queue(),
        e => Promise.reject(e)
      );
    }
    return Promise.resolve().then(() => queue());
  };
  return queue().then(() => Promise.all(result));
}

[ZangYuSong]

// 测试代码
const result = [];
for (let index = 0; index < 10; index++) {
  result.push(function() {
    return new Promise((resolve, reject) => {
      console.log("开始" + index, new Date().toLocaleString());
      setTimeout(() => {
        resolve(index);
        console.log("结束" + index, new Date().toLocaleString());
      }, parseInt(Math.random() * 10000));
    });
  });
}

PromiseLimit(result).then(data => {
  console.log(data);
});

测试结果，图片不知道为啥不显示

开始0 2020/5/18 上午11:28:47
开始1 2020/5/18 上午11:28:47
开始2 2020/5/18 上午11:28:47
开始3 2020/5/18 上午11:28:47
开始4 2020/5/18 上午11:28:47

结束0 2020/5/18 上午11:28:47
开始5 2020/5/18 上午11:28:47

结束5 2020/5/18 上午11:28:51
开始6 2020/5/18 上午11:28:51

结束4 2020/5/18 上午11:28:53
开始7 2020/5/18 上午11:28:53

结束7 2020/5/18 上午11:28:53
开始8 2020/5/18 上午11:28:53

结束1 2020/5/18 上午11:28:54
开始9 2020/5/18 上午11:28:54

结束3 2020/5/18 上午11:28:54
结束2 2020/5/18 上午11:28:55
结束9 2020/5/18 上午11:28:55
结束6 2020/5/18 上午11:28:56
结束8 2020/5/18 上午11:29:01

 [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

[ZangYuSong]

// 修改测试代码 随机失败或者成功
const result = [];
for (let index = 0; index < 10; index++) {
  result.push(function() {
    return new Promise((resolve, reject) => {
      console.log("开始" + index, new Date().toLocaleString());
      setTimeout(() => {
        if (Math.random() > 0.5) {
          resolve(index);
        } else {
          reject(index);
        }
        console.log("结束" + index, new Date().toLocaleString());
      }, parseInt(Math.random() * 1000));
    });
  });
}
PromiseLimit(result).then(
  data => {
    console.log("成功", data);
  },
  data => {
    console.log("失败", data);
  }
);

开始0 2020/5/18 上午11:34:37
开始1 2020/5/18 上午11:34:37
开始2 2020/5/18 上午11:34:37
开始3 2020/5/18 上午11:34:37
开始4 2020/5/18 上午11:34:37
结束4 2020/5/18 上午11:34:37
失败 4
结束0 2020/5/18 上午11:34:37
结束3 2020/5/18 上午11:34:37
结束1 2020/5/18 上午11:34:37
结束2 2020/5/18 上午11:34:37

[huangruitian]

// 这题如果maxNum 为无限大，其实就是在让你实现Promise.all
// 如果是有一个失败就返回 就是Promise.race    
function multiRequest(urls = [], maxNum) {
      let result = new Array(urls.length).fill(false)
      let sum = urls.length; //总数
      let count = 0;             //已完成数
      return new Promise((resolve, reject) => {
        //先请求maxNum个呗    
        while (count < maxNum) {
          next()
        }
        function next() {
          let current = count++
          // 边界
          if (current >= sum) {
            !result.includes(false) && resolve(result)
            return
          }
          let url = urls[current];
          console.log("开始：" + current, new Date().toLocaleString());
          fetch(url).then((res) => {
            console.log("结束：" + current, new Date().toLocaleString());
            result[current] = res
            //还有未完成，递归；
            if (current < sum) {
              next()
            }
          }).catch((err) => {
            console.log("结束：" + current, new Date().toLocaleString());
            result[current] = err
            if (current < sum) {
              next()
            }
          })
        }
      })
 }
    let url2 = `https://api.github.com/search/users?q=d`;
    let arr = new Array(100).fill(url2)
    multiRequest(arr, 10).then((res) => {
      console.log(res)
    })

[qianlongo]

@SupermanWY
借鉴了你的写法，但是有个地方有bug，while循环那里，如果输入的urls的长度小于maxNun，就会一直执行了，所以需要限制一下

const fetch = (url) => {
  return new Promise((rs) => {
    const s = Math.random() * 1000
    setTimeout(() => {
      rs(url)
    }, s)
  })
}

const multiRequest = (urls, maxNum) => {
  let allPromise = []
  let len = urls.length
  let resolve
  let indirectPromise = new Promise((rs) => {
    resolve = rs
  })
  let i = 0

  let addFetch = () => {
    if (i >= len) {
      return resolve()
    }
    let tempP = fetch(urls[i++]).finally(() => {
      addFetch()
    })
    allPromise.push(tempP)
  }
  // 这里需要限定一下
  while (i < maxNum && i < len ) {
    addFetch()
  }

  return indirectPromise.then(() => {
    return Promise.all(allPromise)
  })
}

multiRequest([
  '/a',
  '/b',
  '/c',
  '/d',
  '/e',
  '/f',
], 40).then((res) => {
  console.log(res)
})