当错误状态为:属性“map”不存在于“Observable”类型时,我将如何将 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
更新: 这是我为整个 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
}