Angular ：为什么我得到了一个可观察到的共鸣

发布于12月28日

我从(预期的结果是一个对象数组)获得了一个意外的可观察性(比如随机)作为响应res:

this.api[op.type](op.endpoint,op.body, op.token).pipe(
        take(1),
        tap(async res=>{
          try{            
            if (res){ //getting Observable here
              //do something with res
            }
          }catch(err){
            console.log(err)
          }
          
        }),
        catchError(async (err)=>{
            //more error handling          
        })

我的api['post']是这样的:

post(endpoint: string, body: any, token? : string, reqOpts?: any, url_alt?: any) {
    this.set_headers(token);
    if (!reqOpts) reqOpts = {};
    this.headers.append({"Content-Type": "application/json"});
    reqOpts.headers = this.headers;
      return this.http.post(this.url + endpoint, body, reqOpts).pipe(
        timeout(105000),
        retry(3),
        catchError(async (error)=>{
          return throwError(error)
        })
  
      );
    }
  }

我会非常感激任何关于这里哪里出了问题的指导

推荐答案

在post的catchError块中有一个问题，那就是在Observable函数返回之前添加了blog c，否则它会正常工作！

服务

import { Injectable } from '@angular/core';
import { of, retry, take, throwError, timeout } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class TestService {
  constructor() {}

  post(
    endpoint: string,
    body: any,
    token?: string,
    reqOpts?: any,
    url_alt?: any
  ) {
    // this.set_headers(token);
    if (!reqOpts) reqOpts = {};
    // this.headers.append({"Content-Type": "application/json"});
    // reqOpts.headers = this.headers;
    return throwError('test') // this.http.post(this.url + endpoint, body, reqOpts) // mock http call!
      .pipe(
        timeout(105000),
        retry(3),
        catchError((error) => { // <-- this line is the problem, when I add async before the function Observable gets returned, else it works fine!
          return of(error);
        })
      );
  }

  postWrapper() {
    return this.post('', null).pipe(
      take(1),
      tap(async (res) => {
        try {
          console.log('tap', res);
          if (res) {
            //getting Observable here
            //do something with res
          }
        } catch (err) {
          console.log('catch', err);
        }
      }),
      catchError(async (err) => {
        return of(err);
        //more error handling
      })
    );
  }
}

stackblitz个