angular - 在不中断 http 请求的情况下共享异步数据

Question

我有两个页面，一个页面可以从一个页面导航到另一个页面，每个页面都发出相同的 http 请求，完全相同的请求。显然，我不想在 2 个页面之间导航时一遍又一遍地发出相同的请求，因此在第一次请求发出并完成后，我将请求的响应存储在我的服务中。但缺点是 http 请求有时需要 5-6 秒才能完成，因此如果用户在请求未完成时导航到其他页面，则重新请求。例如，两个页面是 page1 和 page2。用户转到 page1，发出 http 请求，用户等待 4 秒但请求未完成，用户转到 page2 并再次发出请求，用户必须再等待 5 秒才能看到结果。我希望 http 请求不会在 2 个页面之间中断。我该如何解决这个问题？

Answer 1

我认为这对 Subject 来说是个好机会。下面是一些可以解决问题的代码，我将在下面进行解释。

@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
    }
}

在此服务中，您有一个始终返回 Subject 的方法。一旦调用完成，该 Subject 将发出数据。如果您接听电话但没有发出请求，那么我们会设置一个并使用 bool 标志表示请求正在进行中。当该请求完成时，它将发出主题的结果。

无论哪种方式，调用总是返回相同的主题。

所以在您的示例中，有人在第 1 页上，他们要求声明并获得主题并触发请求，但到目前为止尚未解决。他们导航离开，请求仍在继续，第二页现在要求同样的事情。该请求已经在进行中，因此他们只是发送了主题。请求最终完成，他们得到了结果。

注意:唯一的问题是您返回的主题不像 http 调用那样完成。因此，您必须保存该订阅并取消订阅。 https://brianflove.com/2016/12/11/anguar-2-unsubscribe-observables/