Question

我想拥有一种处理异常的通用方法，尤其是从后端接收到的401。当我不提取catchError内容时，它可以正常工作。但是，如果我只是将其提取到特定函数中，则该函数中不会注入任何东西：

return this.http.request<T>(new HttpRequest('POST', this.appConfig.baseApiPath + url, file, {
            reportProgress: true,
            headers: headers,
            params: urlParams
        })).pipe(
            catchError((err) => {
                if (err.status === 401) {
                    this.router.navigateByUrl('/login?expired=true');
                }
                return Observable.throw(err || 'Server error')
            })
        );

这有效！但是，我想在函数中处理此重定向代码，以便通过其他方法重用它。

在这里，我将其导出到函数中

    return this.http.request<T>(new HttpRequest('POST', this.appConfig.baseApiPath + url, file, {
        reportProgress: true,
        headers: headers,
        params: urlParams
    })).pipe(
        catchError(this.handleHttpError),
    );

handleHttpError(error: HttpErrorResponse) {
    if (error.status === 401) {
        this.router.navigateByUrl('/login?expired=true'); --> router is null!
    }
    return Observable.throw(error || 'Server error')
}

如果我使用这种工作方式，那就是路由器（以及其他构造函数注入的服务）为null的地方...你能建议为什么吗？

Answer 1

原因是您正在失去上下文。当以这种方式声明函数this时，关键字是关于函数的作用域，而不是整个类。为了不丢失上下文，您应该使用箭头功能：

handleHttpError = (error: HttpErrorResponse) => {
    if (error.status === 401) {
        this.router.navigateByUrl('/login?expired=true');
    }
    return Observable.throw(error || 'Server error')
}

Answer 2

一种更好的方法是将“ this”绑定到您的呼叫：

catchError(this.handleHttpError.bind(this))

无法在catchError函数内使用服务

2 个答案: