现有 40 个异步请求需要发送,但由于某些原因,我们必须将同一时刻并发请求数量控制在 6 个以内,同时还要尽可能快速的拿到响应结果。应该怎么做?
这个问题与一道经典面试题很类似:
实现一个批量请求函数 multiRequest(urls, maxNum),要求如下:
? 要求最大并发数 maxNum
? 每当有一个请求返回,就留下一个空位,可以增加新的请求
? 所有请求完成后,结果按照 urls 里面的顺序依次打出
串行是一个 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
回调。
缺点:
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
数量是固定的,最终的执行结果还是保持与原来的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)
});
}
});
}
在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之...
作者:Joe Seifi 译者:前端小智 移动: https://mp.weixin.qq.com/s/p5... 有梦...
折叠式卡片布局在PC版网站中可能不常见,但是在手机版,小屏幕的网页浏览会大发...
背景 在公司参与一个原生APP和h5混合开发的项目,本人在项目中负责h5部分,现将...
1、纯工具操作步骤,懂代码更容易 划线就是不符合国人的审美观念,看着就别扭,...
前言 Canvas绘制多变形非常简单,只要懂得Canvas路径 + 简单的初中数学知识即可...
本文没有咬文嚼字的地方,只是一个配色技巧的分享,十分简单,简单到流泪,但或...
1.先瞧瞧效果: 2.代码是这样的: img src=images/circle.png alt= id=circle/@m...
一、虽然有的属性是boolean类型,但仍旧建议按照XHTML书写(属性名=属性值)格式...
简介: 6月4日,以“开启分布式云新时代”为主题2021云边协同大会在北京举行,本...