Angular2 rxjs http.request.catch 对某些 http 错误有奇怪的行为

Question

我的 http 服务没有正确捕获一些 http 错误。 catch 方法有 2 个不同的响应对象(见下文)。

private fireRequest(request: Request): Observable<any> {
    return this.http.request(request)
    .switchMap((response: Response) => {
        const responseData = response.json() || [];
        return Observable.of(responseData);
    })
    .catch((response: Response) => {
        const res2 = response.json();
        // filters http errors from status 0 errors
        if (response.status && response.status > 0) {
            const res = response.json();
            return Observable.of<any>(res);
        }
        const unexpectedNetworkError = new 
              Error('commons.unexpected_network');
        return Observable.throw(unexpectedNetworkError);
    })
}

奇怪的错误行为。 (即使在 chrome 网络选项卡中我也看不到 http 正文)

// catch 404 error
{ 
  headers: Headers,
  ok: false,
  status: 0,
  statusText : "",
  type : 3,
  url : null,
  _body : ProgressEvent
}

纠正错误行为

// catch 401 error
{ 
  headers: Headers,
  ok: false,
  status: 401,
  statusText : "Unauthorized",
  type : 2,
  url : http://api.service/users,
  _body : { // json body}
}

Answer 1

我发现问题与浏览器及其 CORS 行为有关。

a) 调用成功

BROWSER                  SERVER
    | ------ preflight ---> |
    | <-- allow GET, PUT -- |
    | ------- GET req ----> |
    | <------ GET res ----- |

b) 调用失败，支持响应为 404 而不是 200

BROWSER                SERVER
    | ---- preflight ----> |
    | <------ 404 -------- |
    |                      |
    |                      |

c) 无互联网连接，服务器无响应

BROWSER                SERVER
    | ---- preflight ----> X
    |                      |
    |                      |
    |                      |

每当您对不存在的路由进行 api 调用时，浏览器都会发送预检请求 (b)。

根据您的后端错误处理策略，您可能会收到:

1) 正文中包含错误详细信息的 Http 404 代码 在这种情况下，浏览器返回一个带有 http 状态代码 0 的一般错误，而没有实际服务器的有效负载。第二次调用从未进行过，因为预 check out 错后这样做没有任何意义。

2) 预检的 Http 200 代码和实际调用的 404。 在这种情况下，一切正常。

如果没有互联网连接，问题仍然存在。