Angular: why I am getting an Observable as resonse

Issue

I'm getting an unexpected Observable (say randomly) as a response res from (expected result is an Array of Objects):

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

My api['post'] is like this:

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

Would much appreciate any guidance on what's wrong here

Solution

The async line is the problem in the catchError block of post, when I add async before the function Observable gets returned, else it works fine!

service

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

Answered By - Naren Murali