angular - 从 Ionic 3 升级到 5 - .map 不再适用于可观察对象
问题描述
当错误状态时,我将如何将 Ionic 3 中的此代码更改为 Ionic 5 升级:“可观察”类型上不存在属性“映射”。
return XApi.addTransaction('clicksActive', parameters,
{ timeout: AppConfig.OTP_REQUEST_TIMEOUT, queue: false })
.map(res => {
let response = res.data;
let clicksActive: ClicksActive = this.parseActiveResponse(response);
return clicksActive;
}).catch(error => {
let errorMessage = getLambdaErrorMessage(error);
let clicksActive: ClicksActive = {
success: false,
active: false,
errorMessage: errorMessage
}
return Observable.of(clicksActive);
});
我尝试将其更改为:
return XApi.addTransaction('clicksActive', parameters,
{ timeout: AppConfig.OTP_REQUEST_TIMEOUT, queue: false })
.pipe(map(res => {
let response = res.data;
let clicksActive: ClicksActive = this.parseActiveResponse(response);
return clicksActive;
})).catch(error => {
let errorMessage = getLambdaErrorMessage(error);
let clicksActive: ClicksActive = {
success: false,
active: false,
errorMessage: errorMessage
}
return Observable.of(clicksActive);
});
但后来我得到错误:'OperatorFunction<any, ClicksActive>' 类型的参数不可分配给'UnaryFunction<Observable, Observable>' 类型的参数。参数 'source' 和 'source' 的类型不兼容。“Observable”类型缺少“Observable”类型的以下属性:buffer、bufferCount、bufferTime、bufferToggle 和 104
更新:这是我对整个 service.ts 的更新代码:
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx'
import { AppConfig } from '../config/app-config';
import { XApi } from 'x-lib';
import { ClicksActive, ClicksBalance } from '../models/user.model';
import { getLambdaErrorMessage } from "../helpers/lambda-error.helper";
import { map } from 'rxjs/operators';
import { catchError } from 'rxjs/operators';
@Injectable()
export class ClicksService {
constructor() {
}
requestActive(
idNumber: String
): Observable<ClicksActive> {
let parameters =
{
apiUsername: this.getApiUsername(),
apiPassword: this.getApiPassword(),
apiBaseUrl: this.getApiBaseUrl(),
idNumber: idNumber
}
return XApi.addTransaction('clicksActive', parameters, { timeout: AppConfig.OTP_REQUEST_TIMEOUT, queue: false })
.pipe(
map((res) => {
let response = res.data;
let clicksActive: ClicksActive = this.parseActiveResponse(response);
return clicksActive;
}), catchError((error) => {
let errorMessage = getLambdaErrorMessage(error);
let clicksActive: ClicksActive = {
success: false,
active: false,
errorMessage: errorMessage
}
return Observable.of(clicksActive);
})
);
}
parseActiveResponse(response): ClicksActive {
let clicksActive: ClicksActive = {
success: response.success,
active: response.active,
errorMessage: response.errorMessage
}
return clicksActive;
}
requestBalance(
idNumber: String
): Observable<ClicksBalance> {
let parameters =
{
apiUsername: this.getApiUsername(),
apiPassword: this.getApiPassword(),
apiBaseUrl: this.getApiBaseUrl(),
idNumber: idNumber
}
/*let clicksBalance: ClicksBalance = {
success: true,
balance :{
cardNumber: '123456789',
amount: 110,
limit: 220,
timestamp: Date()
},
errorMessage: ""
};
return Observable.of(clicksBalance);*/
return XApi.addTransaction('clicksBalance', parameters, { timeout: AppConfig.OTP_REQUEST_TIMEOUT, queue: false }).map(res => {
let response = res.data;
let clicksBalance: ClicksBalance = this.parseBalanceResponse(response);
return clicksBalance;
}).catch(error => {
let errorMessage = getLambdaErrorMessage(error);
let clicksBalance: ClicksBalance = {
success: false,
balance :{
cardNumber: '',
amount: 0,
limit: 0,
timestamp: null
},
errorMessage: errorMessage
};
return Observable.of(clicksBalance);
});
}
/* GENERIC SERVICES */
getApiUsername(): String {
if (AppConfig.ENVIRONMENT == 'dev') {
return AppConfig.DEV_API_USERNAME;
}
else if (AppConfig.ENVIRONMENT == 'qas') {
return AppConfig.QAS_API_USERNAME;
}
else if (AppConfig.ENVIRONMENT == 'prd') {
return AppConfig.PRD_API_USERNAME;
}
}
getApiPassword(): String {
if (AppConfig.ENVIRONMENT == 'dev') {
return AppConfig.DEV_API_PASSWORD;
}
else if (AppConfig.ENVIRONMENT == 'qas') {
return AppConfig.QAS_API_PASSWORD;
}
else if (AppConfig.ENVIRONMENT == 'prd') {
return AppConfig.PRD_API_PASSWORD;
}
}
getApiBaseUrl(): String {
if (AppConfig.ENVIRONMENT == 'dev') {
return AppConfig.DEV_API_BASE_URL;
}
else if (AppConfig.ENVIRONMENT == 'qas') {
return AppConfig.QAS_API_BASE_URL;
}
else if (AppConfig.ENVIRONMENT == 'prd') {
return AppConfig.PRD_API_BASE_URL;
}
}
parseBalanceResponse(response): ClicksBalance {
if(response.success){
let clicksBalance: ClicksBalance = {
success: response.success,
balance :{
cardNumber: response.balance.cardNumber,
amount: response.balance.amount,
limit: response.balance.limit,
timestamp: response.balance.timestamp
},
errorMessage: response.errorMessage
}
return clicksBalance;
}
else{
let clicksBalance: ClicksBalance = {
success: response.success,
balance : response.balance,
errorMessage: response.errorMessage
}
return clicksBalance;
}
}
}
解决方案
您正在使用新的 Rxjs 和 Ionic 5,因此您需要使用管道函数和新的运算符。这是此迁移的指南:https ://ionicframework.com/docs/reference/migration
但是,为了解决您的问题,您需要以这种方式调用 map 和 catchError 运算符:
call(): Observable<{}>{
return this.addTransaction() // <- simulate the observable which add a transaction
.pipe(
map((res) => {
// your logic here on success
// ...
return {}; // I am using {} but you need to apply your payload
}),
catchError((error) => {
// your logic here on error
// ...
return of({}); // I am using {} but you need to apply your payload
})
);
}
addTransaction(): Observable<{}>{
return of({}); // I am using {} but you need to apply your payload
}
推荐阅读
- php - 为什么在清理 URL 时删除了一些波斯语字符?
- c# - 如何在 .Net Core 中使用 ServiceExtensions?
- java - Java数据输出“日期”和“月份”
- r - 如何检查日期是否在 R 的区间列表内?
- javascript - 检查一个数组中的元素是否存在于另一个数组中
- html - 协助创建简单的导航栏。
- android - Android studio kotlin 文件显示为来自不同包和 XML 文件的 R 类
- javascript - 包含“this”关键字的方法在另一个方法中调用与分配给局部变量时的工作方式不同
- dart - 遗传算法在 Dart/Flutter 中吐出奇怪的结果
- c# - F# 按多个值分组并聚合