Angular 9
我想实现在用户单击按钮时取消 api 请求的功能。 我正在使用“订阅”,所以我认为“取消订阅()”会很好用,但并不像我预期的那样。
这是一个 stackblitz 示例代码,它调用/取消 api 请求,响应将显示在控制台中。
https://stackblitz.com/edit/angular-cancel-pending-http-requests-yavvkb
在这段代码中,如下所示,我调用了“unsubscribe()”来取消调用的请求。 其实在调用“unsubscribe()”之后,很快就到达了add()。但不久之后,它收到了实际的 API 响应。
export class SearchService {
private foo: any = null;
constructor(private apiService: ApiService) { }
public getItemList() {
this.fetchData();
}
public cancel() {
if(this.foo != null) {
this.foo.unsubscribe();
console.log('unsubscribed');
}
}
private fetchData(){
const endPoint: string = 'https://www.mocky.io/v2/5c245ec630000072007a5f77?mocky-delay=2000ms';
this.foo = this.apiService.getData(endPoint).subscribe((resp)=>{
console.log(resp);
},(err)=>{
console.log(err);
}).add(() => {
this.foo = null;
console.log('complete');
});
}
}
输出是
search clicked.
cancel clicked.
complete.
unsubscribed.
{status: true, statusMessage: "Items fetched successfully", data: Array[10]}.
取消后,我不想收到回复,因为这是“取消”的目的。 但我不知道该怎么做。
提前感谢您的友好帮助。
最佳答案
您可以将 rxjs
中的 takeUntil()
与 Subject
一起使用。
我做了一个示例 stackblitz 来展示这种方法:https://stackblitz.com/edit/angular-ivy-8vejbb?file=src/app/app.component.ts
import { Component } from '@angular/core';
import { Observable, Subject, takeUntil } from 'rxjs';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
private m_unsubscribe: Subject<void> = new Subject();
private m_fakeObsCallSource: Subject<void> = new Subject();
private fakeObsCall$: Observable<void> =
this.m_fakeObsCallSource.asObservable();
public sendDataToAPI(): void {
console.log('API call started');
this.fakeObsCall$.pipe(takeUntil(this.m_unsubscribe)).subscribe(
() => console.log('API Call returned data!'),
(error) => {
console.log('API Call ran into a problem!'),
() => {
console.log('API Call completed!');
};
}
);
setTimeout(() => {
this.m_fakeObsCallSource.next();
}, 3000);
}
public unsubscribe(): void {
console.log('Unsubscribed!');
this.m_unsubscribe.next();
}
}
关于Angular 9 取消 HTTP 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63356014/