Question

我开始使用angular 6和Web API来开发单页应用程序。我有一个搜索框，它可以搜索有关按键事件的数据。我看到这样的行为：先加载旧响应，然后再加载下一个响应，该响应在缓慢的连接上看起来不太好。每次使用新的或更少的字符触发键时，如何取消待处理的搜索请求。

Answer 1

要取消正在进行的请求，您可以取消订阅可观察对象。更好的是，如果您使用a b运算符，它将为您做到这一点。

Answer 2

您可以使用KeyUp / KeyDown事件来触发事件；如果要取消订阅该请求集为可观察者。

KeyUp / KeyDown https://angular.io/guide/user-input

退订：

let sub = this.http.get(url, {headers: reqHeaders})
        .subscribe(
            (res) => {
                ...
            }
        );

sub.unsubscribe();

Answer 3

如果您使用observable来发出http获取请求，则可以在发出新请求之前（即您的情况下的每个键）取消上一个http请求的订阅。在下面的示例中，假设MyCustomSearchService是具有方法getSearchResult(searchText)的服务，该方法返回http响应，即return this.http.get(this.apiCallURL+searchText)

export class MySinglePageAppComponent{
    private searchSubscription:any;//property that will store the search http subscription
    private searchText:string;//search text binded to your text box
    constructor(private myCustomSearchService: MyCustomSearchService) 
    {}
    //function called upon keyup
    getSearchValue(){
        //if already searched something then cancel its subscription.
        if(this.searchSubscription){
            this.searchSubscription.unsubscribe();
        }
        this.searchSubscription=this.myCustomSearchService.getSearchResult(this.searchText).subscribe((response)=>{
         let resultJSON=JSON.parse(response.json())
         //rest of the search hadler logic here
      });
    }
}

通过这种方式，先前的待处理请求将被取消。

取消待处理的$ http请求

3 个答案: