Angular 5 - 响应 HttpInterceptor - 超时重试（504）

Question

我尝试实现一个 HttpInterceptor 来重试超时请求。我实现了以下代码，但是 err 不包含状态码，因此它不起作用。

@Injectable()
export class RetryInterceptor implements HttpInterceptor {

    constructor() { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req)
            .retryWhen(error => {
                return error
                    .flatMap((err) => {

                        if (err instanceof HttpErrorResponse && err.status === 504) { // timeout

                            return Observable.of(err.status).delay(5000);
                        }

                        return Observable.throw({ error: 'No retry' });
                    })
                    .take(1)
                    .concat(Observable.throw({ error: 'Sorry, there was an error (after 5 retries)' }));

            });
    }
}

err对象有如下对象（注意status为0）：

Devtools 显示错误 504：

谁能帮帮我？

提前致谢！

---- 更新 ---- 经过更深入的分析，我发现问题在于我有另一个拦截器，它将 Auth 标头添加到我的请求中。我创建了一个 stackblitz 示例来显示这个问题：https://stackblitz.com/edit/angular-interceptors-azhwak 在上面的示例中，您可以检查错误代码是否始终为 0（零），即使错误为 504。如果您注释掉其他拦截器 (I2)，代码将按预期工作。

不确定我是否做错了什么，或者我是否不应该有多个拦截器（一些更新请求，一些更新响应）？

更新 2

用户@AngularInDepth.com 是对的，问题是没有提供CORS。设法让它使用不同的服务工作。但现在我面临一个不同的问题，我只想在第一次重试后调用第二个拦截器（I2）。有办法吗？

查看更新示例：https://stackblitz.com/edit/angular-interceptors-ckbvsb

谢谢

Answer 1

问题在于服务https://httpstat.us/504 本身。当您向请求添加自定义标头时，它无法正确处理 CORS，因此 XHR 请求错误而不是发出请求。当 XHR 出错时，您会收到0 的状态，因为没有发出请求。 Here is the plunker 演示了这一点和代码：

request() {
    const url = 'https://httpstat.us/504';

    var xhr = new XMLHttpRequest();  
    xhr.open('GET', url);      

    // when commented out `onload` handler is executed, otherwise `onerror`    
    // xhr.setRequestHeader('any', 'any');

    xhr.onload = () => {console.log('loaded')};
    xhr.onerror = () => {console.log('errror')};

    xhr.send();
}