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 的服务中，在该服务中，我具有一个tryAuthAuth函数，该函数利用了上述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或我实际上喜欢该错误的组件中。我想我将从上面开始。谢谢！

Answer 1

我不确定您的代码当时是否实际，因为我认为Observable.throw()已经不存在。将是在throwError中找到的operator rxjs。

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

如果您将{{1}的Observable.throw()更改为throwError()，将import throwError从operator更改为rxjs，则应该至少使Observable流功能（并中断）如您所愿。

此外，在您的import { throwError } from 'rxjs'中，您将有catchError； 1个包含错误，另一个包含2 arguments，现在已损坏。如果您只想打破caught Observable，就不必自己扔另一个error。 Observable可以在return caught内达到相同的结果，或者，如果您本身没有错误处理，则甚至不必使用它。

我仍然建议您保留它，因为这是一种很好的做法，并且非常明确地传达您要执行的操作。但是到目前为止，还没有真正的错误处理。

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);
      }
    );

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

2 个答案: