Ошибка при подписке не срабатывает при вызове HttpClient

Question

Когда мой API возвращает ошибку (например, код состояния 400), моя ошибка в подписке не обнаруживается.Я завернул свои вызовы httpclient в службу RestDataService, которую все службы могут использовать для вызовов на основе REST.

Чем у меня есть другая служба под названием SampleService, которая внедряет RestDataService и имеет метод uploadFile, который вызывает мою конечную точку API.

Итак, как только я внедряю Службу в свой CallingClass и вызываю uploadMap изСлужба, кроме обработчика ошибок, никогда не срабатывает.Я не совсем уверен, почему.

@Injectable({
    providedIn: 'root'
})
export class RestDataService {

    constructor(private httpClient: HttpClient) {
    }

    public post(URL: string, data: any): Observable<any> {
        return this.httpClient.post<any>(URL, data, { withCredentials: environment.withCredentials  })
            .pipe(catchError(err => this.handleError('post:' + URL, err)));
    }

    private handleError(url: string, err: any) {
        console.error('RestDataService server error:', err);
        if (err instanceof HttpErrorResponse) {
            let errMsg: string;
            const errDetail = JSON.stringify(err.error);
            errMsg = `${err.status} - ${err.statusText || ''} URL: ${url} Message: ${err.message} Details: ${errDetail}`;
            return throwError(new Error(errMsg));
        }
        return throwError(err || 'RestDataService server error');
    }
}

@Injectable({
    providedIn: 'root'
})
export class SampleService {

    constructor(restDataService: RestDataService) {
        const BASE_URL = environment.Endpoint;
        super(restDataService, BASE_URL);
    }

    public upLoadMap(data: any): Observable<any> {
        const URL = this.BASE_URL + 'par/;
        return this.restDataService.post(URL, data);
    }
}

export class CallingClass {
    constructor(private service: Service, private dialogRef: MatDialogRef) {}

    public uploadMap(xml: any) {
        const data = {
            xmlFile: window.btoa(xml)
        };
        this.service.upLoadMap(data).subscribe(parseData => {
                this.dialogRef.close({data: parseData});
            },
            (err) => {
                console.log(err);
                this.dialogRef.close();
            });
    }
}

Answer 1

Я только что поиграл с catchError, и подписка выдает исключение «TypeError: вы указали« неопределенное »там, где ожидался поток. Вы можете предоставить Observable, Promise, Array или Iterable."

const { throwError } = rxjs;
const { catchError } = rxjs.operators;

throwError('error').pipe(
  catchError(err => { console.log(`From catchError: ${err}`); })
).subscribe(val => { console.log(val); }, err => { console.log(`From sub: ${err}`); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.min.js"></script>

Если у вас нет ошибки перехвата, ваша подписка получает наблюдаемое исключение вместо неопределенного, и обработчик ошибок работает нормально.

const { throwError } = rxjs;
const { catchError } = rxjs.operators;

throwError('error').pipe(
  //catchError(err => { console.log(`From catchError: ${err}`); })
).subscribe(val => { console.log(val); }, err => { console.log(`From sub: ${err}`); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.min.js"></script>

Возможно, вы можете попробовать нажать, чтобы получить ошибку, но не уничтожить наблюдаемую ошибку

const { throwError } = rxjs;
const { tap } = rxjs.operators;

throwError('error').pipe(
  tap(undefined, err => { console.log(`From tap: ${err}`); })
).subscribe(val => { console.log(val); }, err => { console.log(`From sub: ${err}`); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.min.js"></script>