Angular POST请求 - 如何访问响应数据

Question

我正在为我的网站建立一个登录/注册页面。 我有一个django后端，如果我的用户模型中的电子邮件，用户名或密码字段留空，则返回错误。 在Postman中测试时，我能够成功返回错误。 我的问题是捕获数据并在我的部分成功发布请求后将其传递给我的html（部分成功，因为我可以将新用户注册到我的后端）。

这就是我所拥有的：

api.service.ts

@Injectable({
  providedIn: 'root'
})
export class ApiService {...

  private formatErrors(error: any) {
    return Observable.throw(error.json());
} 

...


post(path: string, body: Object = {}): Observable<any> {
  return this.http.post(`${environment.api_url}${path}`, JSON.stringify(body), { headers: this.setHeaders()})
  .pipe(
    catchError(this.formatErrors),
    map((res: Response) => res.json())
  );
}
}

我认为上面的一切都没问题，除非我误解了post函数中的pipe（）/ catchError（）方法。

我将此注入另一个名为user.service.ts的服务，其中我有一个使用上述post方法的attemptAuth函数：

 ...

attemptAuth(type, credentials): Observable<User> {
  let route = (type === 'login') ? '/login': '';
  return this.apiService.post('/users' + route, {user: credentials})
  .pipe(
    map(data => {
      this.setAuth(data.user);
      return data;
    })
  );
 }
...

该用户服务被导入到我的AuthComponent中并在此处使用：

...
submitForm() {
  this.isSubmitting = true;
  this.errors = new Errors();

  let credentials = this.authForm.value;
  this.userService.attemptAuth(this.authType, credentials)
    .subscribe(
      data => this.router.navigateByUrl('/'),
      err => {
        this.errors = err;
        this.isSubmitting = false;
      }
    );
  }
}

知道为什么我的前端在发出邮件请求时没有收到由我的后端提供的响应数据？ 我不相信我的错误发生在我的html或我用来实际喜欢错误的组件中。 我想我会从上面开始。 谢谢！

Answer 1

我不确定你的代码当时是否真实，因为我认为Observable.throw()不再存在。 它将是rxjs的throwError operator 。

https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/throwError.ts

如果你改变了Observable.throw()来throwError()和import的throwError operator从rxjs像import { throwError } from 'rxjs' ，应该至少使可观察数据流功能（并打破）像你期望它。

另外，在catchError ，你将有2 arguments ; 1包含错误，另一个包含现在已损坏的caught Observable 。 如果你只想让Observable中断，你不必自己抛出另一个error 。 return caught可以在catchError()获得相同的结果，或者如果你本身没有错误处理，你甚至不必使用它。

我仍然会建议你保留它，因为这是一种很好的做法，而且非常清楚地传达你想要做的事情。 但到目前为止还没有真正的错误处理方式。

Answer 2

几天前我遇到了类似的问题，处理响应时遇到错误，因为我发送了一个文本。 以下代码解决了我的问题。

如果您的响应是JSON更改响应类型。

let apiurl = `http://localhost/api`;
    const requestOptions: Object = {
      //If your response is text not json
      responseType: 'text'
    }    
    return this.httpClient.post<any>(apiurl, data,requestOptions).pipe(map((data,error) => {
      if(data){
        return data;
      }
      else{
        return error;
      }
    })
    );

你的组件将如下所示：

this.userService.attemptAuth(this.authType, credentials).subscribe(
      (data) => {
         console.log(data);
      }
    );