![](/img/trans.png)
[英]Property 'catch' does not exist on type 'Observable<any>'
[英]Property 'mergeMap' does not exist on type 'Observable<any>'
我正在Ionic 4應用程序中創建一個HttpInterceptor。 我想從本地存儲中讀取Bearer Authorization令牌。
我嘗試使用mergeMap但它總是返回一個錯誤:
Property 'mergeMap' does not exist on type 'Observable<any>'
這是來自token.interceptor.ts的完整代碼
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError, from } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { Router } from '@angular/router';
import { Storage } from '@ionic/storage';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
token: any;
constructor(private router: Router, private storage: Storage) {}
intercept(request: HttpRequest < any > , next: HttpHandler): Observable < HttpEvent < any >> {
return from(this.storage.get('User')).mergeMap((val) => {
if (this.token) {
request = request.clone({
setHeaders: {
'Authorization': this.token
}
});
}
if (!request.headers.has('Content-Type')) {
request = request.clone({
setHeaders: {
'content-type': 'application/json'
}
});
}
request = request.clone({
headers: request.headers.set('Accept', 'application/json')
});
return next.handle(request).pipe(
map((event: HttpEvent < any > ) => {
if (event instanceof HttpResponse) {
console.log('event--->>>', event);
}
return event;
}),
catchError((error: HttpErrorResponse) => {
if (error.status === 401) {
if (error.error.success === false) {
// this.presentToast('Login failed');
} else {
this.router.navigate(['/']);
}
}
return throwError(error);
}));
})
}
}
根據這個問題 ,我嘗試了這種格式:
return from(...).pipe(mergeMap(...));
但它不起作用。
我該怎么辦?
您正在使用舊RxJS API的語法:
import 'rxjs/operators/mergeMap';
myObs$.mergeMap(anotherObs$);
自從RxJS API發生變化(版本5.5+)以來, mergeMap
不再是Observable
一個方法,而是一個函數,你必須在pipe
運算符中使用它,如下所示:
import { mergeMap } from 'rxjs/operators';
myObs$.pipe(mergeMap(anotherObs$));
更新您的導入
import { map, catchError, mergeMap } from 'rxjs/operators';
然后,您可以在管道中使用mergeMap。
const { of } = rxjs; // Using destructuring over import because of snippets const { mergeMap } = rxjs.operators; of(4).pipe( mergeMap(val => of(val * 2)) ).subscribe(result => { console.log(result); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.4.0/rxjs.umd.min.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.