Я пытался создать счетчик загрузки в своем приложении 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 есть какие-либо советы, мы будем очень признательны.
Спасибо!
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;
})
);
}
омг, какое простое решение, хаха, спасибо!