Angular 5 - 响应 HttpInterceptor - 超时重试 (504)
Angular 5 - Response HttpInterceptor - retry on timeout (504)
我尝试实现一个 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 object有如下object(注意状态为0):
Devtools 显示错误 504:
谁能帮帮我?
提前致谢!
----更新----
经过更深入的分析后,我发现问题是我有另一个拦截器将 Auth header 添加到我的请求中。我创建了一个 stackblitz 示例来展示这个问题:https://stackblitz.com/edit/angular-interceptors-azhwak
在上面的示例中,您可以检查错误代码是否始终为 0(零),即使错误是 504。如果您注释掉另一个拦截器 (I2),代码将按预期工作。
不确定我是否做错了什么或者我是否不应该有多个拦截器(一些更新请求,一些更新响应)?
更新 2
用户@AngularInDepth.com 是对的,问题是没有提供 CORS。设法让它使用不同的服务工作。但现在我面临一个不同的问题,我只想在第一次重试后调用第二个拦截器 (I2)。有办法吗?
查看更新后的示例:https://stackblitz.com/edit/angular-interceptors-ckbvsb
谢谢
问题出在服务 https://httpstat.us/504
本身。当您向请求添加自定义 header 时,它无法正确处理 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();
}
我尝试实现一个 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 object有如下object(注意状态为0):
Devtools 显示错误 504:
谁能帮帮我?
提前致谢!
----更新---- 经过更深入的分析后,我发现问题是我有另一个拦截器将 Auth header 添加到我的请求中。我创建了一个 stackblitz 示例来展示这个问题:https://stackblitz.com/edit/angular-interceptors-azhwak 在上面的示例中,您可以检查错误代码是否始终为 0(零),即使错误是 504。如果您注释掉另一个拦截器 (I2),代码将按预期工作。
不确定我是否做错了什么或者我是否不应该有多个拦截器(一些更新请求,一些更新响应)?
更新 2
用户@AngularInDepth.com 是对的,问题是没有提供 CORS。设法让它使用不同的服务工作。但现在我面临一个不同的问题,我只想在第一次重试后调用第二个拦截器 (I2)。有办法吗?
查看更新后的示例:https://stackblitz.com/edit/angular-interceptors-ckbvsb
谢谢
问题出在服务 https://httpstat.us/504
本身。当您向请求添加自定义 header 时,它无法正确处理 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();
}