时间戳

首页 > 解决方案 > Angular 6 RxJS，订阅者没有获得价值

angular - Angular 6 RxJS，订阅者没有获得价值

问题描述

我有一个 login.component

  login() {
    this.accountService.login(this.model)
      .subscribe(
        response => {
            //do stuff
        },
        (error: AppError) => {
         // do stuff
        },  
      );

登录服务

   login(loginModel: LoginModel) {
    return this.http.post('auth/login/', loginModel).pipe(
      tap(response => {
        if (response) {
         //add jwt to local storage
         }
     }));
     }

和一个 httpinterceptor

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const headerSettings: { [ name: string ]: string | string[]; } = {};

    return this.localStorage.getItem(AppStorageKeys.JWT).pipe(
      mergeMap((token: any) => {
        if (token)
          //add to headers etc

        const apiReq = req.clone({ url: `${environment.apiBase}/${req.url}`, headers: newHeader });
        return next.handle(apiReq);
      }));
     }

当登录失败时 login.component 会显示错误。登录成功时，从 api 成功检索令牌，正如我从开发工具中的网络选项卡中看到的那样，但该值从未存储在 login.service 的 map 函数中，也没有调用 response => {} 函数在 login.component.ts 内 - 但错误呢？

我究竟做错了什么？

- - - 编辑：

我创建了一个stackblitz但它正在那里工作，这让我相信这可能是因为我的 login.component 和服务位于拦截器的子模块中。

标签： angularrxjs

解决方案

如评论中所述，Angular 6HttpClient默认只接受 JSON 作为响应。为了改变可接受的响应类型，在post函数调用中添加第三个参数，如下所示：

return this.http.post('auth/login/', loginModel, {responseType: 'text'})

更多信息可以在这里找到：https ://angular.io/guide/http#requesting-non-json-data

推荐阅读