在不中断 http 请求的情况下共享异步数据
sharing the async data without interrupting the http request
我有两个页面,可以从一个页面导航到另一个页面,每个页面都发出相同的 http 请求,完全相同的请求。显然,我不想在 2 个页面之间导航时一遍又一遍地发出相同的请求,因此在第一次请求发出并完成后,我将请求的响应存储在我的服务中。但缺点是 http 请求有时需要 5-6 秒才能完成,因此如果用户在请求未完成时导航到其他页面,则重新请求。例如,两个页面是 page1 和 page2。用户转到 page1,发出 http 请求,用户等待 4 秒但请求未完成,用户转到 page2 并再次发出请求,用户必须再等待 5 秒才能看到结果。我希望 http 请求不会在 2 个页面之间中断。我该如何解决?
我认为这对主题来说是个好机会。这是一些可以解决问题的代码,我将在下面进行解释。
@Injectable()
export class ClaimsService {
private _claimsSubject = new Subject<any>(); // what every request will return
private _requestIsInProgress = false; // determines if a request is being made
constructor(private http: HttpClient) {}
public getClaims(): Observable<any> {
// check if we have a request in progress or need to make one
if (!this._requestIsInProgress) {
this._requestIsInProgress = true;
// make the request
this.http.get<any>('your apis url to get the claims')
.subscribe((claims) => {
this._requestIsInProgress = false; // request is complete
this._claimsSubject.next(claims); // emit the data
});
}
return this._claimsSubject.asObservable(); // this is returning an observable that needs to be unsubscribed from
}
}
在此服务中,您有一个始终 returns 主题的方法。一旦调用完成,该 Subject 将发出数据。如果您接听电话但没有发出请求,那么我们会设置一个并使用布尔标志表示请求正在进行中。该请求完成后,它将发出主题的结果。
无论哪种方式,调用总是returns相同的主题。
因此,在您的示例中,有人在第 1 页上,他们要求声明并获得主题并触发了请求,但到目前为止尚未解决。他们导航离开,请求仍在继续,第二页现在要求同样的事情。该请求已经在进行中,因此他们只是发送了主题。请求终于完成了,他们得到了结果。
注意:唯一的问题是您返回的主题不像 http 调用那样完成。因此,您必须保存该订阅并取消订阅。 https://brianflove.com/2016/12/11/anguar-2-unsubscribe-observables/
我有两个页面,可以从一个页面导航到另一个页面,每个页面都发出相同的 http 请求,完全相同的请求。显然,我不想在 2 个页面之间导航时一遍又一遍地发出相同的请求,因此在第一次请求发出并完成后,我将请求的响应存储在我的服务中。但缺点是 http 请求有时需要 5-6 秒才能完成,因此如果用户在请求未完成时导航到其他页面,则重新请求。例如,两个页面是 page1 和 page2。用户转到 page1,发出 http 请求,用户等待 4 秒但请求未完成,用户转到 page2 并再次发出请求,用户必须再等待 5 秒才能看到结果。我希望 http 请求不会在 2 个页面之间中断。我该如何解决?
我认为这对主题来说是个好机会。这是一些可以解决问题的代码,我将在下面进行解释。
@Injectable()
export class ClaimsService {
private _claimsSubject = new Subject<any>(); // what every request will return
private _requestIsInProgress = false; // determines if a request is being made
constructor(private http: HttpClient) {}
public getClaims(): Observable<any> {
// check if we have a request in progress or need to make one
if (!this._requestIsInProgress) {
this._requestIsInProgress = true;
// make the request
this.http.get<any>('your apis url to get the claims')
.subscribe((claims) => {
this._requestIsInProgress = false; // request is complete
this._claimsSubject.next(claims); // emit the data
});
}
return this._claimsSubject.asObservable(); // this is returning an observable that needs to be unsubscribed from
}
}
在此服务中,您有一个始终 returns 主题的方法。一旦调用完成,该 Subject 将发出数据。如果您接听电话但没有发出请求,那么我们会设置一个并使用布尔标志表示请求正在进行中。该请求完成后,它将发出主题的结果。
无论哪种方式,调用总是returns相同的主题。
因此,在您的示例中,有人在第 1 页上,他们要求声明并获得主题并触发了请求,但到目前为止尚未解决。他们导航离开,请求仍在继续,第二页现在要求同样的事情。该请求已经在进行中,因此他们只是发送了主题。请求终于完成了,他们得到了结果。
注意:唯一的问题是您返回的主题不像 http 调用那样完成。因此,您必须保存该订阅并取消订阅。 https://brianflove.com/2016/12/11/anguar-2-unsubscribe-observables/