Description of the problem: When the number of asynchronous requests is uncertain, in order to prevent the accumulation of countless call stacks and memory overflow problems when hundreds of http requests occur in an instant. Requirements: Limit the number of concurrent requests to less than 3 at a time, and get the response results as quickly as possible. Same interview question: Implement a batch request function multiRequest(urls, maxNum) with the following requirements:
1. Implementing serial and parallel Ajax based on Promise.allUsually, asynchronous requests are encapsulated based on promises. Serial: After one asynchronous request is completed, the next request will be made Parallelism: multiple asynchronous requests are processed simultaneously Example: Serial 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') }) parallel: 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 ensures that all promise objects in the array reach the resolved state before executing the then callback Promise.all concurrency limitMeaning: It means that the number of promises executed concurrently at each moment is fixed, and the final execution result remains consistent with the original promise.all. Ideas and Implementation This is implemented using recursive calls and setting a maximum number of requests. And each of these requests should continue to be sent recursively when completed, and the specific URL in urls is determined by the passed index to ensure that the final output order is not messed up, but output in sequence Code implementation: function multiRequest(urls = [], maxNum) { //Total number of requests const len = urls.length; // Create an array to save the request results based on the number of requests const result = new Array(len).fill(false); // Current completed number let count = 0; return new Promise((resolve, reject) => { // Request maxNum while (count < maxNum) { next(); } function next() { let current = count++; // Handle boundary conditions if (current >= len) { // Once all requests are completed, set the promise to a successful state, and then return result as the promise value!result.includes(false) && resolve(result); return; } const url = urls[current]; console.log(`start ${current}`, new Date().toLocaleString()); fetch(url) .then((res) => { // Save request result result[current] = res; console.log(`Completed${current}`, new Date().toLocaleString()); // If the request is not completed, recurse if (current < len) { next(); } }) .catch((err) => { console.log(`end ${current}`, new Date().toLocaleString()); result[current] = err; // If the request is not completed, recurse if (current < len) { next(); } }); } }); } Code implementation: // Task list->New task 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(); // Complete the request} 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: "Error", message: "Service connection error" + item.name + "Unsuccessful upload", }); .finally(() => { uploadThreadNums--; resultFinishNum++; upload(); ); })(sendFinishNum); uploadThreadNums++; sendFinishNum++; } }; var createTask = function () { axios.all(tasks).then((res) => { //Create a new upload task/* let fd1, fd2, calcFlag, flagArr, language; fd1 = {}; flagArr = Object.assign([], _this.ruleForm.checkList); if (_this.ruleForm.recognize == "Automatic recognition") { flagArr.push("2"); calcFlag = flagArr.reduce( (accu, curr) => Number(accu) + Number(curr) ); _this.ruleForm.recognize == "Automatically 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 audio, 2 video 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(); }, This concludes this article about using js to implement sample code for limiting the number of concurrent Ajax requests. For more information about js Ajax concurrent request limitation, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Specific use of GNU Parallel
>>: MYSQL development performance research: optimization method for batch inserting data
This article example shares the specific code of ...
This article example shares the specific code of ...
Preface Although some love in this world has a pr...
This article shares the specific code of JavaScri...
Table of contents Preface Implementation ideas Ef...
Under the instructions of my leader, I took over ...
First, let's explain the network setting mode...
Use CSS styles and HTML tag elements In order to ...
Since the standard ab only supports stress testin...
Parent File import React, { useState } from '...
clip-path CSS properties use clipping to create t...
Preface The project requirement is to determine w...
I just installed Ubuntu and there was no network ...
<button> tag <br />Definition and usag...
Table of contents 1. Shallow cloning 2. Deep clon...