在输入更改时发送多个 http 请求并应用最后一次更改答案

【问题标题】：sending multiple http requests on input change and apply the last change在输入更改时发送多个 http 请求并应用最后一次更改
【发布时间】：2019-10-06 22:05:15
【问题描述】：

我正在使用 angularjs。每次输入更改时，我都会发送一个获取请求。当我得到结果时，UI 会相应地发生变化。但是，我的问题是用户可能会快速输入输入并且由于某些原因（可能是互联网延迟）最后一个 HTTP 调用在其他调用之前完成，并且 UI 将显示最后一个 FINISHED 调用的更改，而不是最后一个调用请求。我的问题是，有没有办法确保调用的最后一个 api 被应用？

代码示例：

html:

<input type=" ng-change="$ctrl.reloadData()"
                             />

js:

function reloadData(){
     $http.get("/myurl").then(function(data){
         //update ui with data
     })
}

【问题讨论】：

标签： javascript angularjs api http

【解决方案1】：

一种方法是链接上一次重新加载：

promise = $q.when();
function reloadData(){
     promise = promise.then(function() {
         return $http.get("/myurl").then(function(data){
         //update ui with data
     });
};

也可以使用ng-model-options 来限制调用次数：

<input ng-model="input1"
       ng-change="$ctrl.reloadData()"
       ng-model-options="{ debounce: 1000 }" />

有关详细信息，请参阅

AngularJS ng-model-options Directive API Reference

【讨论】：

【解决方案2】：

我建议不要在每次输入更改时都发送 GET 请求，这会发送很多未使用的请求。

您可以使用超时功能来限制正在发送的 GET 请求的数量。 Angular http 有一个名为unsubscribe 的方法，您可以使用它来取消订阅请求，如下所示：

var timeout = null;
var request = null;

function reloadData() {
    if (timeout) clearTimeout(timeout);
    if (request) request.unsubscribe();

    timeout = setTimeout(_ => {
        request = $http.get("/myurl").then(function(data){
            //update ui with data
        });
    }, 200);
}

【讨论】：

AngularJS $http Service 返回承诺并且没有 .unsubscribe 方法。