web-dev-qa-db-ja.com

Angular 2でHTTPリクエストをキャンセルする方法は？

Angular 2のHTTPリクエストをキャンセルする方法は？

要求の約束だけを拒否する方法を知っています。

return new Promise((resolve, reject) => {
    this.currentLoading.set(url, {resolve, reject});

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

                this.currentLoading.delete(url);
                this.cache.set(url, res);

                resolve(res);
            }
        );
});
httppromiseangular
50
tom10271

unsubscribeを呼び出すことができます

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

                    this.currentLoading.delete(url);
                    this.cache.set(url, res);

                    resolve(res);
                }
            );

sub.unsubscribe();

詳細はこちら： http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http

54
TGH

次の簡単なソリューションを使用できます。

if ( this.subscription ) {
   this.subscription.unsubscribe();
}
this.subscription = this.http.get( 'awesomeApi' )
 .subscribe((res)=> {
  // your awesome code..
})
48
Ervin Llojku

パーティーに少し遅れましたが、ここに私の見解があります：

import { Injectable } from '@angular/core'
import { Http } from '@angular/http'
import { Observable } from 'rxjs/Observable'
import { Subscriber } from 'rxjs/Subscriber'

@Injectable ()
export class SomeHttpServiceService {
  private subscriber: Subscriber<any>
  constructor(private http: Http){ }

  public cancelableRequest() {
    let o = new Observable(obs => subscriber = obs)
    return this.http.get('someurl').takeUntil(o)
      .toPromise() //I dont like observables
      .then(res => {
        o.unsubscribe
        return res
      })
  }
  public cancelRequest() {
    subscriber.error('whatever')
  }
}

これにより、リクエストを手動でキャンセルできます。私は時々、ページ上の結果に変更を加える観測可能性または約束になります。リクエストが自動的に開始された場合（ユーザーがフィールドにxミリ秒入力しなかった場合）、リクエストを中止できるのは素晴らしいことです（ユーザーは突然何かを再度入力しています）...

takeUntilは、単純なタイムアウト（Observable.timer）を探している場合も動作するはずです https://www.learnrxjs.io/operators/filtering/takeuntil.html

6
clearfix

ObservableでSwitchMapを使用して、以前のリクエストの応答をキャンセルし、最新のもののみをリクエストできます。

https://www.learnrxjs.io/operators/transformation/switchmap.html

6
Ben Taliadoros

switchMap[docs] を使用します。これにより、すべての実行中のリクエストがキャンセルされ、最新のリクエストのみが使用されます。

get(endpoint: string): Observable<any> {
        const headers: Observable<{url: string, headers: HttpHeaders}> = this.getConfig();
        return headers.pipe(
            switchMap(obj => this.http.get(`${obj.url}${endpoint}`, { headers: obj.headers, params: params }) ),
            shareReplay(1)
        );
    }

shareReplay は、遅延サブスクライバーの最新の値を出力します。

0
Ian