优化 http 并发请求

更新日期: 2021-06-07阅读: 1.6k标签: http

问题

现有 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)
      });
    }
  });
}
原文来自:https://segmentfault.com/a/1190000040137112


链接: https://fly63.com/article/detial/10399

HTTPS 常见部署问题及解决方案

到任何有关部署 HTTPS 或 HTTP/2 的问题,都推荐先用 Qualys SSL Labs SSL Server Test 跑个测试,大部分问题都能被诊断出来。

HTTP请求头和响应头部包括的信息有哪些【HTTP请求头各字段解释】

每个HTTP请求和响应都会带有相应的头部信息。默认情况下,在发送XHR请求的同时,还会发送下列头部信息: Accept、Accept-Charset、Accept-Encoding、Connection、Host

服务器响应常用状态码及含义_ajax请求中http返回的状态码大全

HTTP状态码是用以表示网页服务器HTTP响应状态的3位数字代码,其中第一位数字表示响应类别,响应类别从1到5分为五种,分别代表:临时响应、成功、重定向、请求错误、服务器错误。

HTTPS 如何保证数据传输的安全性

在客户端与服务器数据传输的过程中,HTTP协议的传输是不安全的,也就是一般情况下HTTP是明文传输的。但HTTPS协议的数据传输是安全的,也就是说HTTPS数据的传输是经过加密的

http协议的发展历史

在最早的时候,第一个定稿的http协议是http/0.9版本,在这个版本里面,http协议,它的内容,非常非常的简单 只有一个命令。http协议的历史,其中当然还有https,https是http的安全版本,它实际使用的内容跟http/1.1没有很大的区别

axios 模块化封装_对axios的二次封装的实现

Axios 是一个基于 promise 的 HTTP 库 ,使用了axios来进行数据的请求,一般都需要我们对它进行封装处理。下面简单介绍下如何对axios的二次封装的实现,以及在vue中的使用。

HttpClient的3种超时

设置ConnectionPoolTimeout:这定义了从ConnectionManager管理的连接池中取出连接的超时时间,此处设置为1秒。设置ConnectionTimeout:这定义了通过网络与服务器建立连接的超时时间。Httpclient包中通过一个异步线程去创建与服务器的socket连接

HTTP 请求头中的 Remote_Addr,X-Forwarded-For,X-Real-IP

X-Forwarded-For一般是每一个非透明代理转发请求时会将上游服务器的IP地址追加到X-Forwarded-For的后面,使用英文逗号分割;X-Real-IP一般是最后一级代理将上游IP地址添加到该头中;X-Forwarded-For是多个IP地址,而X-Real-IP是一个

HTTP协议中的短轮询、长轮询、长连接和短连接

HTTP协议是基于请求/响应模式的,因此只要服务端给了响应,本次HTTP连接就结束了,根本没有长连接这一说。网络上说HTTP分为长连接和短连接,其实本质上是说的TCP连接。TCP连接是一个双向的通道,它是可以保持一段时间不关闭的,因此TCP连接才有真正的长连接和短连接这一说。

常见HTTP请求错误码

一些常见的状态码为:200 - 服务器成功返回网页;404 - 请求的网页不存在;503 - 服务不可用。1xx(临时响应):表示临时响应并需要请求者继续执行操作的状态代码。2xx (成功):表示成功处理了请求的状态代码。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!