快捷導(dǎo)航

利用js實現(xiàn)Ajax并發(fā)請求限制請求數(shù)量的示例代碼

更新時間：2021年04月07日 10:16:00 作者：GuaX

這篇文章主要介紹了利用js實現(xiàn)Ajax并發(fā)請求限制請求數(shù)量的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

出現(xiàn)問題描述：當(dāng)不確定異步請求個數(shù)時，為防止當(dāng)一瞬間發(fā)生上百個http請求時，導(dǎo)致堆積了無數(shù)調(diào)用棧進(jìn)而導(dǎo)致內(nèi)存溢出問題。

要求：將同一時刻并發(fā)請求數(shù)量控制在3個以內(nèi)，同時還要盡可能快速的拿到響應(yīng)的結(jié)果。

同面試問題：

實現(xiàn)一個批量請求函數(shù) multiRequest(urls, maxNum)，要求如下：

要求最大并發(fā)數(shù) maxNum
每當(dāng)有一個請求返回，就留下一個空位，可以增加新的請求
所有請求完成后，結(jié)果按照 urls 里面的順序依次打出

1、基于Promise.all實現(xiàn)Ajax的串行和并行

平時都是基于promise來封裝異步請求的

串行：一個異步請求完成了之后再進(jìn)行下一個請求

并行：多個異步請求同時進(jìn)行

示例：串行

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')
})

并行：

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保證數(shù)組中所有promise對象都達(dá)到resolve狀態(tài)，才執(zhí)行then回調(diào)

Promise.all并發(fā)限制

含義：指每個時刻并發(fā)執(zhí)行的promise數(shù)量是固定的，最終執(zhí)行的結(jié)果還是保持與原來的promise.all一致。

思路與實現(xiàn)

采用遞歸調(diào)用來實現(xiàn)，設(shè)置最大請求數(shù)量上限。并在這些請求中的每一個都應(yīng)該在完成時繼續(xù)遞歸發(fā)送，通過傳入的索引來確定了urls里面具體是那個URL，保證最后輸出的順序不會亂，而是依次輸出

代碼實現(xiàn)：

function multiRequest(urls = [], maxNum) {
 // 請求總數(shù)量
 const len = urls.length;
 // 根據(jù)請求數(shù)量創(chuàng)建一個數(shù)組來保存請求的結(jié)果
 const result = new Array(len).fill(false);
 // 當(dāng)前完成的數(shù)量
 let count = 0;

 return new Promise((resolve, reject) => {
  // 請求maxNum個
  while (count < maxNum) {
   next();
  }
  function next() {
   let current = count++;
   // 處理邊界條件
   if (current >= len) {
    // 請求全部完成就將promise置為成功狀態(tài), 然后將result作為promise值返回
    !result.includes(false) && resolve(result);
    return;
   }
   const url = urls[current];
   console.log(`開始 ${current}`, new Date().toLocaleString());
   fetch(url)
    .then((res) => {
     // 保存請求結(jié)果
     result[current] = res;
     console.log(`完成 ${current}`, new Date().toLocaleString());
     // 請求沒有全部完成, 就遞歸
     if (current < len) {
      next();
     }
    })
    .catch((err) => {
     console.log(`結(jié)束 ${current}`, new Date().toLocaleString());
     result[current] = err;
     // 請求沒有全部完成, 就遞歸
     if (current < len) {
      next();
     }
    });
  }
 });
}

代碼實現(xiàn)：

  // 任務(wù)列表->新建任務(wù)
 
  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: "服務(wù)連接錯誤 " + item.name + " 未上傳成功",
         });
        .finally(() => {
         uploadThreadNums--;
         resultFinishNum++;
         upload();
      );
     })(sendFinishNum);
     uploadThreadNums++;
     sendFinishNum++;
    }
   };
   var creatTask = function () {
    axios.all(tasks).then((res) => {
     // 新建上傳任務(wù)
      /* 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();
  },

到此這篇關(guān)于利用js實現(xiàn)Ajax并發(fā)請求限制請求數(shù)量的示例代碼的文章就介紹到這了,更多相關(guān)js Ajax并發(fā)請求限制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: