等待發出AngularJS HTTP請求

Question

對於我的網站，我正在發出訪問API的http請求。 按鍵事件觸發。 問題是它在每次連續按鍵時都會進行許多ajax調用，因此要控制它，我必須添加一個較小的超時（如300毫秒）。 我進行了如下的http調用，現在如何修改？

var req = {
    method: 'GET',
    url: 'url of api',
    headers: {
        "Key": "keyofapi",
        "Accept": "application/json"
    },
};

$http(req)
    .success(function(data, status, headers, config) {
    })
    .error(function(data, status, headers, config) {
    });

Answer 1

將您的函數包裝在$ timeout函數內，提及超時（PS 以毫秒為單位的值 ）。 不要忘記在控制器參數中注入$ timeout。 嘗試這個，

$timeout(function () {
        $http({
                method: 'POST', //No I18N
                url: 'your URL', //No I18N
                params: { 
                    parameters if needed
                }
            }).success(function (data, status, headers, config) {
                //Do the required
            });
        }, 2500);

Answer 2

實際上，我建議您去一家工廠或服務部門，看看是否有有效的請求並在等待。

yourApp.factory('apiReqeust', ['$http', function($http) {
  // If you want to complete all requests that you sending,
  // make this varable an empty array and push every new request inside it.
  var waitingRequest = null; // Or quenuedRequests = [];
  var isWorking = false;
  // In my case I will not make an array, and will have only one request that will wait.
  // I mean the last attempted request.
  // This is perfect for an Autocomplete API

  function request(options, callback) {
    if (isWorking) {
      // If you are already running request at this time.
      // Replace waiting request with this one. (this one is newer request)
      waitingRequest = {options: options, callback: callback}
      // EDIT! I forgot about the return statement.
      // You need to stop, otherwise the request will be executed anyway.
      return;
    }
    isWorking = true;

    $http(options).success(function(data) {
      // When the request ends, tell that you are not working
      // So you can execute next request immediately
      isWorking = false;

      // execute callback with data parameter.
      callback(data);

      // If you have waiting request yet. execute it.
      if (waitingRequest) {
        request(waitingRequest.options, waitingRequest.callback);

        waitingRequest = null;
      }
    }).error(function(err) {
      isWorking = false;
      callback(null, err);
      if (waitingRequest) {
        request(waitingRequest.options, waitingRequest.callback);
      }
    });
  }
  return request;
});

用法是：

// Factory or controller or whatever that can depend on above factory
youApp.factory('another-whatever', ['apiRequest', function(apiRequest) {
  options = {'Some': 'HttpOptions'};
  apiRequest(options, function(data, err) {
    if (err) throw new Error(err);
    // And here you doing what you want with the data.
  });
}]);

我沒有測試此代碼。 我不知道它是否有效。 但我希望你有主意。

Answer 3

實際上，我建議您去一家工廠或服務部門，看看是否有有效的請求並在等待。

 function request(options, callback) {
    if (isWorking) {
      // If you are already running request at this time.
      // Replace waiting request with this one. (this one is newer request)
      waitingRequest = {options: options, callback: callback}
      // EDIT! I forgot about the return statement.
      // You need to stop, otherwise the request will be executed anyway.
      return;
    }
    isWorking = true;

    $http(options).success(function(data) {
      // When the request ends, tell that you are not working
      // So you can execute next request immediately
      isWorking = false;

      // execute callback with data parameter.
      callback(data);

      // If you have waiting request yet. execute it.
      if (waitingRequest) {
        request(waitingRequest.options, waitingRequest.callback);

        waitingRequest = null;
      }
    }).error(function(err) {
      isWorking = false;
      callback(null, err);
      if (waitingRequest) {
        request(waitingRequest.options, waitingRequest.callback);
      }
    });
  }
  return request;
});

用法是：

// Factory or controller or whatever that can depend on above factory
youApp.factory('another-whatever', ['apiRequest', function(apiRequest) {
  options = {'Some': 'HttpOptions'};
  apiRequest(options, function(data, err) {
    if (err) throw new Error(err);
    // And here you doing what you want with the data.
  });
}]);