4

我正在使用 Angular 4。这个问题已在 safari、chrome 和 Firefox 中发现。

我的 Angular 4 应用程序使用 httpclient 将 XHR 请求发送到 REST 服务。通信采用 JSON。

存在潜在的 CORS 问题，因此浏览器会发送飞行前 OPTIONS 请求。

该请求以 JSON 格式返回用户的详细信息。

有时（可能是五分之一），我会看到以下综合反应：

例如，如果两个请求快速连续发送（相同的 URL），我会看到： OPtions Request sent Options Request sent GET Request sent (no response) GET request sent (Results combined with last GET returned)

所以对于最后一个 GET，我会收到：

    {"username":"Dave Smith","badge":"12345", "lockPollTime":61000}{"username":"Dave Smith","badge":"12345", "lockPollTime":61000}

（即：两个 JSON 对象共同加入，这是一个 JSON 语法错误，因此应用程序中断）.. 而我希望这两个 GET 分别接收其中一个：

{"username":"Dave Smith","badge":"12345", "lockPollTime":61000}

我在其他请求中也看到了这一点，URL 不同（相同的服务器和 REST 服务，不同的操作）。

从 authService 服务获取登录信息的调用如下所示：

login(username: string, password: string): Observable<LoginResponse|boolean> {
    return this.http.get(ApiRoutes.auth.login, this.loginHeaders(username, password)).map((response: Response) => {
        if(response.headers.get('Content-Type').indexOf('text/html') !== -1) {
            return false;
        }

        return new LoginResponse(response);
    });
}

对它的调用是这样的：

this.authService.login(username, password).subscribe(
    (user: LoginResponse|boolean) => { .. etc etc } )

用户凭据通过拦截器提供：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if(this.authService.getAuthToken()) {
        request = request.clone({
            setHeaders: {
                Authorization: `Basic ${this.authService.getAuthToken()}`
            }
        });
    }

    return next.handle(request);
}

如果我在浏览器窗口中尝试其中一个 REST 服务 URL 并多次按 F5，我将无法重现该问题。似乎只是有角度的 http 请求，虽然我不知道这是否是一个公平的测试。

我不确定这是不是..

  • Angular 订阅问题
  • httpclient 错误
  • 服务器端的问题（很难想象）

如果有人能对此有所了解，我将不胜感激，并将通过扩音器在大街上高呼您的用户 ID。

我唯一的线索是有时会发送异步请求（例如心跳“ping”），这些有时似乎与用户发起的请求发生冲突（例如保存，使用 POST 请求或 GET 获取其他信息） .

感激地收到任何帮助或建议。

4

1 回答 1

1

只需将map替换为switchmap，它将自动取消除最后一个请求之外的所有请求。

更多信息：使用 switchmap 搜索

编辑：例如，如果您有 2 个不同的功能

     http.get(API_URL1).switchmap(...)
     http.get(API_URL2).map(...)

switchmap 只能取消来自 API_URL1 的旧请求。或者即使你有这样的东西：

     http.get(API_URL1).switchmap(...)
     http.get(API_URL2).switchmap(...)

同时有来自 URL1 和 URL2 的请求很好，因为每个 switchmap 只能取消来自其 URL 的旧请求。

希望这能消除您的困惑。

于 2017-11-24T12:54:55.513 回答