angular - 如何捕获http在post请求上失败的情况

Question

在我的服务中，我以这种方式调用 API:

async check_initial_cpf(cpf:string){
    return this.http.post(environment.api_url+'/check_initial_cpf', {}, {cpf:cpf}).toPromise();
}

因此，在我的页面中，我以这种方式调用该服务:

const check_cpf = await this.cnhService.check_initial_cpf(this.form_cpf);

if(check_cpf['error'] == true){
    presentAlertError();
} else {
    console.log('it worked');
}

这正在努力捕获 HTTP 200 内容 {'error':'api error message'}

但是当 HTTP 请求由于其他原因(如 404、500 等)失败时，什么也不会发生。

我怎样才能以干净的方式做到这一点？

Answer 1

将其包装在 try/catch block 内。在这种情况下，您可能会在 catch block 中收到错误:

try {
  const check_cpf = await this.cnhService.check_initial_cpf(this.form_cpf);
  if (check_cpf['error'] == true) {
    presentAlertError();
  } else {
    console.log('it worked');
  }
} catch(error) {
  presentAlertError();
}

更新

由于您使用 HttpClient 进行 API 调用，因此首先将 Observable 转换为 Promise，然后捕获错误中的错误是没有意义的。 catch block 。

您可以使用 catchError 捕获错误然后使用 throwError 将其返回给调用者。这样，您就可以在提供给 subscribe 方法的第二个回调中捕获它。

类似这样的事情:

check_initial_cpfObservable(something) {
  return this.http
    .get("your-url-here")
    .pipe(catchError(error => throwError(error)));
}

然后在组件中:

this.cnhService.check_initial_cpfObservable(this.form_cpf)
  .subscribe(
    response => console.log('It Worked in Observable!'),
    error => this.presentAlertError()
  )

<小时/>

Here's a Working Code Sample Example for your ref with both the approaches.