问题
现有 40 个异步请求需要发送,但由于某些原因,我们必须将同一时刻并发请求数量控制在 6 个以内,同时还要尽可能快速的拿到响应结果。应该怎么做?
这个问题与一道经典面试题很类似:
实现一个批量请求函数 multiRequest(urls, maxNum),要求如下:
• 要求最大并发数 maxNum
• 每当有一个请求返回,就留下一个空位,可以增加新的请求
• 所有请求完成后,结果按照 urls 里面的顺序依次打出
实现
Promise 串行与并行
- 串行:一个异步请求完了之后在进行下一个请求;
- 并行:多个异步请求同时进行;
串行
串行是一个 http 请求成功后再次发起下一个 http 请求;
优点
- http 请求是有序的;
- 后一个 http 请求可以拿到前一个请求的返回值;
缺点:
- 没有利用浏览器同域名请求的最大并发数,同时只会存在一个 http 请求,很大程度上延长了响应时间。
const p = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("1000");
resolve();
}, 1000);
});
};
const p1 = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("2000");
resolve();
}, 2000);
});
};
const p2 = function () {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("3000");
resolve();
}, 3000);
});
};
p().then(() => {
return p1();
}).then(() => {
return p2();
}).then(() => {
console.log("end");
});
并行
参数数组中所有 promise 都达到resolve
状态,才执行then
回调。
缺点:
- 如果 http 请求达到几万条,promise.all 在瞬间发出几万条 http 请求,这样很有可能导致堆积了无数调用栈导致内存溢出。
- 任意一个 promise 是 reject,就不会进入 then;
const promises = () => {
return [1000, 2000, 3000].map((current) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(current);
resolve();
}, current);
});
});
};
Promise.all(promises()).then(() => {
console.log("end");
});
Promise.all 并发限制
Promise.all 并发限制指的是:每个时刻并发执行的promise
数量是固定的,最终的执行结果还是保持与原来的Promise.all
一致。
栗子: 请求接口相同,参数不同的请求并发限制
添加最大并发数 maxRequestNum,所有请求完成后再返回。
优点:
- 利用浏览器同域名请求的最大并发数,快速拿到所有返回值,减少响应时间,不会造成堆栈溢出。
缺点:
- 所有请求全部结束才会返回,白屏时间久,用户体验不好。
const multiRequest = (fetch, params = [], maxRequestNum = 6) => {
const paramsLength = params.length;
let result = new Array(paramsLength).fill(false);
let sendCount = 0;
let finishCount = 0;
return new Promise((resolve) => {
while (sendCount < maxRequestNum && sendCount < paramsLength) {
next();
}
function handleResult(current, res) {
finishCount ++;
result[current] = res;
if (sendCount < paramsLength) {
next();
}
if (finishCount >= paramsLength) {
resolve(result);
}
}
function next() {
let current = sendCount++;
const param = params[current];
fetch(param).then((res) => {
handleResult(current, res)
}).catch((err) => {
handleResult(current, err)
});
}
});
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。