没有在Angular中检测到404

时间:2018-04-22 15:30:24

标签: angular

我有一个Angular应用,如果我的API返回404状态代码,我正在尝试重定向到某个页面。我试图以下列方式捕获错误,然后如果它是404,则推送到另一个页面。

  ngOnInit(){
    this.auth.memberInfo()
      .subscribe(res =>{
        this.user = res.json();
        console.log('The User: ', res.json());
        this.profileService.getProfile(res.json().id)
          .subscribe(res => {

            if(res.status === 404){
              this.navCtrl.push('CreateProfilePage');
            } else {
              this.profile = res.json();

              if(this.profile.first_name && this.profile.last_name)
                this.profileInitials = this.profile.first_name.charAt(0) + this.profile.last_name.charAt(0);
            }

          })

      })
  }

出于某种原因,此检查无效,我没有处理错误。

任何人都可以看到我可能做错了吗?

1 个答案:

答案 0 :(得分:1)

最有效的方法是使用拦截器。简单地声明你的拦截器:

<强>未found.interceptor.ts

import {Injectable} from '@angular/core';
import {
  HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest
} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {Router} from '@angular/router';
import 'rxjs/add/operator/catch';
import {ErrorObservable} from 'rxjs/observable/ErrorObservable';

@Injectable()
export class NotFoundInterceptor implements HttpInterceptor {
  constructor(private router: Router) {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return next.handle(req)
      .catch((response: HttpErrorResponse) => {
        if (response.status === 404) {
          this.router.navigate('/your-404-route');
        }

        return ErrorObservable.create(response);
      });
  }
}

然后在 app.module.ts

中提供
providers: [
...
    {
      provide: HTTP_INTERCEPTORS,
      useClass: NotFoundInterceptor,
      multi: true
    }
...
  ],

现在,对于您发送的任何HTTP呼叫,如果您恢复404,它会将用户重定向到您的404页面。您可以将此方法用于许多方面,例如:

  1. 取消对401响应的用户授权
  2. 禁止页面
  3. 全局错误处理
  4. 你的名字是:)