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

【问题标题】：Angular POST Request - How to access Response dataAngular POST 请求 - 如何访问响应数据
【发布时间】：2019-06-04 05:05:51
【问题描述】：

我正在为我的网站构建登录/注册页面。如果我的用户模型中的电子邮件、用户名或密码字段留空，我有一个 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(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 或我用来实际喜欢错误的组件中。我想我会从上面开始。谢谢！

【问题讨论】：

你能尝试得到console.log()的响应吗，this.userService.attemptAuth(this.authType, credentials) .subscribe( response => {console.log(response);});

标签： angular rest post service

【解决方案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' 一样，那至少应该使 Observable 流函数（和中断）像你期望的那样它到。

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

我仍然建议您保留它，因为这是一种很好的做法，并且非常明确地传达您正在尝试做的事情。但目前还没有真正的错误处理。

【讨论】：

好的，在我的 formatErrors 函数中，我现在使用return throwError(error.json())。现在在我的 catchError() 中，我将如何提供后端提供的“错误”数据？它会类似于我在下面的 map() 运算符中的操作方式吗？
首先，在 Angular 2 以上的版本上，您不必再使用 .json() 了； HttpClient 现在为您完成！ :-D。 error 是 catchError() 中的内容；所以你可以把console.log() 放在那里看看到底有什么。如果没有错误，则不会触发 catchError()。所以它基本上是一个map() 仅用于错误。 :-)

【解决方案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);
      }
    );

【讨论】：