淘汰赛：Ajax 请求中止

Posted 2023-02-22

【中文标题】淘汰赛：Ajax 请求中止

【英文标题】：knockout : Ajax request abort

【发布时间】：2018-09-13 07:01:23

【问题描述】：

我想在新请求运行时阻止以前的 ajax 请求。我这样做就像下面的代码。但是，它不起作用。

我在 beforeSend() 函数中添加了用于中止先前请求的代码。但是，这行不通。

请帮我解决这个问题。

jQuery :

return Component.extend(
    defaults: 
        changeTextValue: ko.observable(),
        currentRequest: ko.observable(),
        anotherObservableArray: [],
        subscription: null,
        tracks: 
            changeTextValue: true
        
    ,
    initialize: function() 
        this._super();
    ,
    doSomething: function(config) 
        var self = this;
        if (this.subscription)
            this.subscription.dispose();

        this.subscription = this.changeTextValue.subscribe(function(newValue) 
            this.currentRequest = $.ajax(
                url: urlBuilder.build('abc/temp/temp'),
                type: 'POST',
                data: JSON.stringify(
                    'searchtext': newValue
                ),
                global: true,
                contentType: 'application/json',
                beforeSend: function(jqXHR) 
                    console.log("before Ajax send");
                    console.log(this.currentRequest);
                    if (this.currentRequest != null) 
                        this.currentRequest.abort();
                    
                ,
                success: function(response) 
                    var json_data = JSON.parse(response);
                    self.autocompleteData.removeAll();
                    $.each(json_data, function(key, val) 
                        self.autocompleteData.push(
                            productID: val.productID
                        );
                    );
                ,
                error: function(jqXHR, exception) 
                    alert("Not OK!")
                
            );
        );
    ,
);
ko.applyBindings(new CeremonyViewModel());

【参考方案1】：

所以我猜你想在再次调用subscribe 函数时取消之前的请求，对吗？

在这种情况下，如果再次调用 subscribe，请尝试中止它。

return Component.extend(
    defaults: 
        changeTextValue: ko.observable(),
        currentRequest: null,
        anotherObservableArray: [],
        subscription: null,
        tracks: 
            changeTextValue: true
        
    ,
    initialize: function() 
        this._super();
    ,
    doSomething: function(config) 
        var self = this;
        if (this.subscription)
            this.subscription.dispose();

        this.subscription = this.changeTextValue.subscribe(function(newValue) 
            if (self.currentRequest) 
                self.currentRequest.abort();
            
            self.currentRequest = $.ajax(
                url: urlBuilder.build('abc/temp/temp'),
                type: 'POST',
                data: JSON.stringify(
                    'searchtext': newValue
                ),
                global: true,
                contentType: 'application/json',
                success: function(response) 
                    var json_data = JSON.parse(response);
                    self.autocompleteData.removeAll();
                    $.each(json_data, function(key, val) 
                        self.autocompleteData.push(
                            productID: val.productID
                        );
                    );
                ,
                error: function(jqXHR, exception) 
                    alert("Not OK!")
                
            );
        );
    ,
);
ko.applyBindings(new CeremonyViewModel());

【讨论】：

不工作 :( kotemplate.js:96 Uncaught TypeError: self.currentRequest.abort is not a function

能否请您检查并给我其他解决方案，如果工作？

嗨.. 不幸的是，如果不亲自调试代码，我无法进一步说明解决方案可能是什么。有没有机会以某种方式给我拉链？

问题是你将 currentRequest 初始化为 ko.observable() => 这不是 null 但也没有一个名为 abort() 的函数。您应该将初始化从 currentRequest: ko.observable() 更改为 currentRequest: null

@MariusJunak 哦，是的，好点，我没有注意到就复制了。