ajax模拟并发测试,字节跳动面试官：请用JS实现Ajax并发请求控制

最近也很久没输出文章了，缘由很简单，最近巨忙，，，，面试

讲真的，最近也很迷茫。关于技术、关于生活吧。也找了不少在大厂的朋友去聊，想需求一些后期发展的思路。这其中也聊到了面试，聊到了招聘中会给面试者出的一些题目。我正好也很久没面试了，就从中选了几道。最近也会陆续出一系列关于一些面试问题的解析。segmentfault

今天这道是字节跳动的：数组

实现一个批量请求函数 multiRequest(urls, maxNum)，要求以下：

• 要求最大并发数 maxNum

• 每当有一个请求返回，就留下一个空位，能够增长新的请求

• 全部请求完成后，结果按照 urls 里面的顺序依次打出

这道题目我想不少同窗应该都或多或少的见过，下面我会依次从出现的场景、问题的分析到最终的实现，一步步力求深刻浅出的给出这道题目的完整解析。promise

场景

假设如今有这么一种场景：现有 30 个异步请求须要发送，但因为某些缘由，咱们必须将同一时刻并发请求数量控制在 5 个之内，同时还要尽量快速的拿到响应结果。并发

应该怎么作？异步

首先咱们来了解一下 Ajax的串行和并行。函数

基于 Promise.all 实现 Ajax 的串行和并行

咱们平时都是基于promise来封装异步请求的，这里也主要是针对异步请求来展开。fetch

串行：一个异步请求完了以后在进行下一个请求

并行：多个异步请求同时进行

经过定义一些promise实例来具体演示串行/并行。url

串行

var p = function () {

return new Promise(function (resolve, reject) {

setTimeout(() => {

console.log("1000");

resolve();

}, 1000);

});

};

var p1 = function () {

return new Promise(function (resolve, reject) {

setTimeout(() => {

console.log("2000");

resolve();

}, 2000);

});

};

var p2 = function () {

return new Promise(function (resolve, reject) {

setTimeout(() => {

console.log("3000");

resolve();

}, 3000);

});

};

p()

.then(() => {

return p1();

})

.then(() => {

return p2();

})

.then(() => {

console.log("end");

});

如示例，串行会从上到下依次执行对应接口请求。spa

并行

一般，咱们在须要保证代码在多个异步处理以后执行，会用到：

Promise.all((promises: [])).then((fun: function));

Promise.all能够保证，promises数组中全部promise对象都达到resolve状态，才执行then回调。

var promises = function () {

return [1000, 2000, 3000].map((current) => {

return new Promise(function (resolve, reject) {

setTimeout(() => {

console.log(current);

}, current);

});

});

};

Promise.all(promises()).then(() => {

console.log("end");

});

Promise.all 并发限制

这时候考虑一个场景：若是你的promises数组中每一个对象都是http请求，而这样的对象有几十万个。

那么会出现的状况是，你在瞬间发出几十万个http请求，这样颇有可能致使堆积了无数调用栈致使内存溢出。

这时候，咱们就须要考虑对Promise.all作并发限制。

Promise.all并发限制指的是，每一个时刻并发执行的promise数量是固定的，最终的执行结果仍是保持与原来的Promise.all一致。

题目实现

思路分析

总体采用递归调用来实现：最初发送的请求数量上限为容许的最大值，而且这些请求中的每个都应该在完成时继续递归发送，经过传入的索引来肯定了urls里面具体是那个URL，保证最后输出的顺序不会乱，而是依次输出。

代码实现

function multiRequest(urls = [], maxNum) {

// 请求总数量

const len = urls.length;

// 根据请求数量建立一个数组来保存请求的结果

const result = new Array(len).fill(false);

// 当前完成的数量

let count = 0;

return new Promise((resolve, reject) => {

// 请求maxNum个

while (count < maxNum) {

next();

}

function next() {

let current = count++;

// 处理边界条件

if (current >= len) {

// 请求所有完成就将promise置为成功状态, 而后将result做为promise值返回

!result.includes(false) && resolve(result);

return;

}

const url = urls[current];

console.log(`开始 ${current}`, new Date().toLocaleString());

fetch(url)

.then((res) => {

// 保存请求结果

result[current] = res;

console.log(`完成 ${current}`, new Date().toLocaleString());

// 请求没有所有完成, 就递归

if (current < len) {

next();

}

})

.catch((err) => {

console.log(`结束 ${current}`, new Date().toLocaleString());

result[current] = err;

// 请求没有所有完成, 就递归

if (current < len) {

next();

}

});

}

});

}