Question

我已经为Angular 6重构了一个旧项目（Angular 2）。除了api调用的问题之外，一切都很好。在登录组件中，当我提交表单时，使用数据触发POST请求，拦截器添加某些标头（现在只有内容类型）。提交表格的代码：

this.authService.signIn(this.account)
        .subscribe( res => {
          console.log('RES -> ', res);
          this.router.navigate([this.returnUrl]);
        },
          err => console.log(err));

AuthService方法：

 signIn(account: Account) {
    const req = new HttpRequest(HttpMethods.Post, AuthService.signInUrl,{account: account});
    return this.makeRequest(req);
   }

private makeRequest(req: HttpRequest<any>): Observable<any> {
    this.progressBarService.availableProgress(true);
    return this.http.request(req)
        .finally( () => this.progressBarService.availableProgress(false));
  }

我添加的console.log由于某种原因被解雇了两次：第一次是{type: 0}，第二次返回我需要的数据。我已经从拦截器中删除了所有内容，只留下了next.handle(req)并且它也是如此。知道为什么我收到2个回复，第一个只是{type: 0}？

Answer 1

那是因为您使用this.http.request()。我想第一个响应实际上是对OPTIONS请求的响应。

如果您仍然坚持使用this.http.request()（例如，如果使用它来上传文件），则可能需要使用rxJs takeLast(1)来获得所需的响应。

这里是参考。 https://angular.io/api/common/http/HttpClient#request

Angular 6 HTTPClient：请求触发一次，接收2个响应

1 个答案: