服务器之家：专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 利用js实现Ajax并发请求限制请求数量的示例代码

利用js实现Ajax并发请求限制请求数量的示例代码

2022-02-24 16:48GuaX js教程

这篇文章主要介绍了利用js实现Ajax并发请求限制请求数量的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

出现问题描述：当不确定异步请求个数时，为防止当一瞬间发生上百个http请求时，导致堆积了无数调用栈进而导致内存溢出问题。

要求：将同一时刻并发请求数量控制在3个以内，同时还要尽可能快速的拿到响应的结果。

同面试问题：

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

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

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

平时都是基于promise来封装异步请求的

串行：一个异步请求完成了之后再进行下一个请求

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

示例：串行

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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')
})

 并行：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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: []).then(fun: function);

promise.all保证数组中所有promise对象都达到resolve状态，才执行then回调

Promise.all并发限制

含义： 指每个时刻并发执行的promise数量是固定的，最终执行的结果还是保持与原来的promise.all一致。

思路与实现

采用递归调用来实现，设置最大请求数量上限。并在这些请求中的每一个都应该在完成时继续递归发送，通过传入的索引来确定了urls里面具体是那个URL，保证最后输出的顺序不会乱，而是依次输出

代码实现：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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();
     }
    });
  }
 });
}

代码实现：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
// 任务列表->新建任务
 
uploadFile() {
 let _this = this;
 var uploadThreadLimitNums = 3,
  uploadThreadNums = 0,
  sendFinishNum = 0,
  resultFinishNum = 0;
 var marks = 0;
 var tasks = [];
 var upload = function () {
  while (uploadThreadNums < uploadThreadLimitNums) {
   if (sendFinishNum >= _this.fileList.length) {
    if (resultFinishNum >= _this.fileList.length) {
     creatTask(); // 完成请求
    }
    return;
   }
   (function (j) {
    let item = _this.fileList[j];
    let p = new FormData();
    p.append("file", item);
    tasks.push(
     axios({
      method: "post",
      url: `${window.UL_CONFIG.BASEURL}/api/files/upload`,
      data: p,
      onUploadProgress: (progressEvent) => {
       for (let i in _this.rowData) {
        _this.rowData[i].name === item.name
         ? (_this.rowData[i].percent = Math.round(
           (progressEvent.loaded / progressEvent.total) * 100
          ))
         : "";
       }
      },
     })
      .then((res) => {
      /* let obj = {};
       obj.url = `${window.UL_CONFIG.BASEURL}/api/files/${res.data}`;
       obj.fileName = item.name;
       obj.fmt = _this.ruleForm.format;
       obj.samplingRate = _this.ruleForm.samplingRate;
       fileUrls.push(obj); */
      })
      .catch((e) => {
         ? (_this.rowData[i].percent = 0)
       _this.$notify.error({
        title: "错误",
        message: "服务连接错误 " + item.name + " 未上传成功",
       });
      .finally(() => {
       uploadThreadNums--;
       resultFinishNum++;
       upload();
    );
   })(sendFinishNum);
   uploadThreadNums++;
   sendFinishNum++;
  }
 };
 var creatTask = function () {
  axios.all(tasks).then((res) => {
   // 新建上传任务
    /* let fd1, fd2, calcFlag, flagArr, language;
   fd1 = {};
   flagArr = Object.assign([], _this.ruleForm.checkList);
   if (_this.ruleForm.recognize == "自动识别") {
    flagArr.push("2");
   calcFlag = flagArr.reduce(
    (accu, curr) => Number(accu) + Number(curr)
   );
   _this.ruleForm.recognize == "自动识别"
    ? (language = "")
    : (language = _this.ruleForm.recognize);
   fd1.processContent = calcFlag;
   fd1.remark = _this.ruleForm.remark;
   fd1.name = _this.ruleForm.taskName;
   fd1.fmt = _this.ruleForm.format;
   fd1.samplingRate = _this.ruleForm.samplingRate;
   fd1.language = language;
   fd1.type = 1; // type: 1 语音, 2 视频
   fd1.files = fileUrls; */
   newTask(fd1).then((res) => {
    /* _this.cmpltBtnState = false;
    _this.$store.commit("setTaskId", res.data.id);
    _this.submitFailNumber = res.data.submitFailNumber; */
    _this.$parent.dataInit();
   });
  });
 upload();
},

到此这篇关于利用js实现Ajax并发请求限制请求数量的示例代码的文章就介绍到这了,更多相关js Ajax并发请求限制内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

原文链接：https://blog.csdn.net/m0_37714008/article/details/112462983

  • ajax
  • JS
  • 并发

    • 延伸 · 阅读

    精彩推荐
    • js教程原生js拖拽功能制作滑动条实例代码

      原生js拖拽功能制作滑动条实例代码

      这篇文章主要介绍了原生js拖拽功能制作滑动条实例教程,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的...

      蒋伟平3522022-01-17
    • js教程JS实现页面侧边栏效果探究

      JS实现页面侧边栏效果探究

      这篇文章主要介绍了JS实现页面侧边栏效果探究,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以...

      行舟客5132021-12-29
    • js教程如何在现代JavaScript中编写异步任务

      如何在现代JavaScript中编写异步任务

      这篇文章主要给大家介绍了关于如何在现代JavaScript中编写异步任务的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考...

      疯狂的技术宅11842022-01-12
    • js教程微信小程序选择图片控件

      微信小程序选择图片控件

      这篇文章主要为大家详细介绍了微信小程序选择图片控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      小雅雅家的小凯凯吖9972022-01-04
    • js教程JS实现随机点名系统

      JS实现随机点名系统

      这篇文章主要为大家详细介绍了JS实现随机点名系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      乘风破浪的程序媛3462022-02-22
    • js教程一篇文章告诉你JavaScript 如何实现继承

      一篇文章告诉你JavaScript 如何实现继承

      JavaScript 在编程语言界是个特殊种类，它和其他编程语言很不一样，JavaScript 可以在运行的时候动态地改变某个变量的类型。...

      Python进阶学习交流5482022-02-19
    • js教程四个Javascript 中的 For 循环

      四个Javascript 中的 For 循环

      在 ECMAScript5（简称 ES5）中，有三个循环。在 2015 年 6 月发布的 ECMAScript6（简称 ES6）中，新增了一种循环类型。...

      锋享前端4722022-01-12
    • js教程JavaScript代码实现简单日历效果

      JavaScript代码实现简单日历效果

      这篇文章主要为大家详细介绍了JavaScript代码实现简单日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      乘风破浪的程序媛4302022-02-23
    最近更新
    编辑推荐
    阅读排行
    热门标签
    音频波形图 　 文字时钟 　 Object.assign 　 removeAttribute 　 attachEvent 　 并发请求控制 　 选择图片 　 电灯开关 　 随机图形 　 点击切换 　 防止重复 　 规则集 　 arcgis.js 　 关闭广告 　 Nest.js 　 SSG 　 onShareTimeline 　 点餐程序 　 胶囊 　 mustache.js 　 元件 　 悬浮图标 　 按钮角标 　 鼠标拖曳 　 AutoJs 　 Strve.js 　 蒙板 　 mapboxgl 　 轨迹线 　 多层次 　
    © 2019-2022 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图