通过 vue-resource 限制并发 HTTP 调用答案

【问题标题】：Limit concurrent HTTP calls via vue-resource通过 vue-resource 限制并发 HTTP 调用
【发布时间】：2018-04-07 10:06:42
【问题描述】：

我们在我们的应用程序中同时通过 vue-resource 执行多个 $http.get 调用。有没有办法设置限制，以便 vue-resource 将请求排队并根据此限制执行调用？

【问题讨论】：

你是说限制$http.get()同时通话吗？
@kevguy 即使我在一秒钟内调用$http.get() 100 次，如果我设置 10 个并发请求限制，Vue 应该排队请求并等待其他请求运行新请求，这样就不会不能同时运行 11 个 http 调用。

标签： javascript vue.js vuejs2 vue-resource

【解决方案1】：

我没有使用 Vue 资源。

我只是用另一个承诺包装承诺：

const callBackFunction = function (valueToReturn, promise) {
  pendingRequestsArr.pop();
  if (waitingRequestsArr.length > 0) {
    executeXHR(waitingRequestsArr.shift())
  }
  if (valueToReturn.body && !valueToReturn.body.hasOwnProperty('error')) {
    if (promise) promise(valueToReturn.body.content || valueToReturn.body);
    return valueToReturn.body.content || valueToReturn.body;
  }
  else
    return valueToReturn.error
};

function executeXHR(obj) {
    if (!AJAX_CONCURRENT || pendingRequestsArr.length < AJAX_CONCURRENT) {
      pendingRequestsArr.push(obj.resource(obj.data).then((response) => callBackFunction(response, obj.promise)))
    } else {
      waitingRequestsArr.push(obj);
    }
}
function wrapPromise(resource, data){
  return new Promise((resolve, reject)=>{
    executeXHR({"resource": resource, "data": data, "promise": resolve});
  })
}
getAllProjects() {
        return wrapPromise($projects.get);//$project.get == $http.get('/projects')
      },

【讨论】：