Тип «неизвестный» не может быть назначен типу «HttpEvent<any>». Попытка создать перехватчик HTTP в приложении Angular

Я пытался создать счетчик загрузки в своем приложении Angular.

Я нашел интересный урок здесь (https://medium.com/swlh/angular-loading-spinner-using-http-interceptor-63c1bb76517b).

Все шло довольно хорошо до последнего шага, когда мне нужно было создать функцию перехвата.

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor, HttpResponse
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError, map } from 'rxjs/operators'
import { LoadingService } from './loading.service';

/**
 * This class is for intercepting http requests. When a request starts, we set the loadingSub property
 * in the LoadingService to true. Once the request completes and we have a response, set the loadingSub
 * property to false. If an error occurs while servicing the request, set the loadingSub property to false.
 * @class {HttpRequestInterceptor}
 */
@Injectable()
export class HttpRequestInterceptor implements HttpInterceptor {

    /**
     * 
     * @param _loading 
     */
    constructor(
        private _loading: LoadingService
    ) { }

    /**
    * Called at the start of every HTTP request. This function will try to activate the loading spinner
    * @param request 
    * @param next 
    * @returns 
    */
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this._loading.setLoading(true, request.url);
        return next.handle(request)
            .pipe(catchError((err) => {
                this._loading.setLoading(false, request.url);
                return err;
            }))
            .pipe(map<HttpEvent<any>, any>((evt: HttpEvent<any>) => {
                if (evt instanceof HttpResponse) {
                    this._loading.setLoading(false, request.url);
                }
                return evt;
            }));
      }
}

Первая труба в порядке.

Однако по всей второй трубе есть большая красная линия. В ошибке указано следующее:

Аргумент типа «OperatorFunction<HttpEvent, Any>» нельзя назначить параметру типа «OperatorFunction<unknown, Any>». Тип «неизвестно» нельзя назначить типу «HttpEvent».ts(2345).

Я вижу ошибку в VSCode (синий) и Microsoft VS (фиолетовый), что означает, что с моим кодом определенно что-то не так, а не моя IDE странная...

Статья была написана в июне 2020 года (4 года назад), так что, возможно, в работе наблюдаемых Angular произошли изменения?

Я изучаю Angular около 1 недели, а также не очень хорошо знаком с машинописным текстом, поэтому прошу прощения, если мне не хватает некоторых фундаментальных знаний, но был бы признателен за некоторые рекомендации, поскольку я не уверен, как действовать дальше...

Если у гуру stackoverflow есть какие-либо советы, мы будем очень признательны.

Спасибо!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
63
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

catchError должен возвращать наблюдаемую величину, поэтому я использую of для преобразования ошибки в наблюдаемую, это вызывает ошибки на карте ниже по потоку.

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    this._loading.setLoading(true, request.url);
    return next.handle(request).pipe(
      catchError((err) => {
        this._loading.setLoading(false, request.url);
        return of(err);
      }),
      map<HttpEvent<any>, HttpEvent<any>>((evt: HttpEvent<any>) => {
        if (evt instanceof HttpResponse) {
          this._loading.setLoading(false, request.url);
        }
        return evt;
      })
    );
  }

омг, какое простое решение, хаха, спасибо!

nbofni 18.06.2024 14:31

Другие вопросы по теме