Http Get catch 在角度 2 中不起作用

Question

我有一个带有以下内容的 service.ts 类：

getData(username:string, password:string) {

    let params: URLSearchParams = new URLSearchParams();
    params.set('username', username);
    params.set('password', password);


    let requestOptions = new RequestOptions();
    requestOptions.search = params;
    return  this._http.get(this._url,requestOptions).map((res:Response)=>res.status)
   .catch((error: any) => {
                if (error.status === 500) {
                    return Observable.throw(new Error(error.status));
                }
                else if (error.status === 400) {
                    return Observable.throw(new Error(error.status));
                }
                else if (error.status === 409) {
                    return Observable.throw(new Error(error.status));
                }
                else if (error.status === 406) {
                    return Observable.throw(new Error(error.status));
                }
            });
}

我的 component.ts 类是：

    onCLick(myForm : NgForm) {
    this._service.getData(this.userName, this.password).subscribe(resData => this.formStatus = resData,
    resError => this.formStatus = resError); 
    if (this.formStatus === 400) {
    this.router.navigateByUrl('/Home');
    } else if (this.formStatus === 200) {
    console.log(this.formStatus );
    } else {
       console.log(this.formStatus );
    }
  }

在运行页面时，即使响应是 status = 400 的错误，但在调试时它最初并没有进入 service.ts 的 catch 块（服务器命中后），而是移动到 component.ts，在函数 *onClick()* 中，然后在执行后进入 catch 块，这对我来说看起来很奇怪。我希望执行 catch 块，而不是执行 return 语句，因为存在错误。 P.S: formStatus 在从表单中引用双向绑定。

因此

if (this.formStatus === 400) {
    this.router.navigateByUrl('/Home');
    } else if (this.formStatus === 200) {
    console.log(this.formStatus );
    } else {
       console.log(this.formStatus );
    }

由于未设置状态，上述部分代码不起作用。

Answer 1

你是怎么调试的？放置 console.log 来捕获块。

我认为在异步执行后立即检查条件不是一个好习惯。

这部分执行异步：

this._service.getData(this.userName, this.password).subscribe(resData => this.formStatus = resData,
    resError => this.formStatus = resError); 

这部分可能无法正确执行，因为this.formStatus可能还没有初始化。

if (this.formStatus === 400) {
this.router.navigateByUrl('/Home');
} else if (this.formStatus === 200) {
console.log(this.formStatus );
} else {
   console.log(this.formStatus );
}

你必须在错误块中检查它。