从本地存储获取服务器URL以调用Ionic(Angular)中的API

Question

我正在使用Angular创建一个Ionic应用程序。在ApiService.ts文件中，我具有从本地存储获取API服务器URL的逻辑。我还在这个文件中为每个API定义了方法。

然后我在另一个页面上导入ApiService并调用API方法，但它首先执行方法，然后从本地存储中获取值。在这种情况下，API_URL为空。因此，不要使用本地存储的URL调用API。

以下是代码

ApiService.ts

import { EnvService } from './env.service';
import { Injectable } from '@angular/core';
import { ToastController } from '@ionic/angular';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Storage } from '@ionic/storage';
@Injectable({
providedIn: 'root'
})
export class ApiService {
private API_URL: string;
private httpOptions: any;

private BearerToken: any;
private APILoading: any;
constructor(private storage: Storage, private env: EnvService,
private http: HttpClient, private toastController: ToastController) {

this.storage.get(this.env.COMPANY_CONFIG_STORAGE_KEY).then(res => {
if (res) {
this.API_URL = res.RESULT[0].APIURL;

}
});
this.storage.get(this.env.TOKEN_KEY).then(res => {
if (res) {
debugger;
this.httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'X-Auth-Token': res[0].TOEKN
})
};
}
});
}
GetDashboardDetails(flag: number, LOCID: number, OUSERID: number) {
return this.http.get(this.API_URL + 'API/MgmtDashboard/GetDashboardDetails?FLAG='+ flag +'&LOCID='+ LOCID +'&OUSERID=' +
OUSERID, this.httpOptions);
}
}

DashboardPage.ts

import { EnvService } from './../../services/env.service';
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { Chart } from 'chart.js';
import { ApiService } from 'src/app/services/api.service';
@Component({
selector: 'app-dashboard-statistics',
templateUrl: './dashboard-statistics.page.html',
styleUrls: ['./dashboard-statistics.page.scss'],
})
export class DashboardPage implements OnInit,AfterViewInit {
@ViewChild('doughnutCanvas') doughnutCanvas: ElementRef;  
private doughnutChart: Chart;   

constructor(private api: ApiService,private env: EnvService) { 
this.api.GetDashboardDetails(0,15,120).subscribe(data=>{
console.log('GetDashboardDetails' + data);
});
}
ngOnInit() {}
ngAfterViewInit(){

this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
type: 'doughnut',
data: {
labels: ['Scheduled', 'Visited', 'Visit Orders'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
}
]
}
});
}

}

谢谢。。。

Answer 1

不要从服务构造函数的本地存储中检索密钥。在尝试使用它们之前，先在api方法中获取它们。在您的api方法中使用它们之前，请使用Promise.all()确保这两个promise都已解析。

import { EnvService } from './env.service';
import { Injectable } from '@angular/core';
import { ToastController } from '@ionic/angular';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Storage } from '@ionic/storage';
@Injectable({
providedIn: 'root'
})
export class ApiService {
private API_URL: string;
private httpOptions: any;
private BearerToken: any;
private APILoading: any;
constructor(
private storage: Storage,
private env: EnvService,
private http: HttpClient,
private toastController: ToastController
) { }
GetDashboardDetails(flag: number, LOCID: number, OUSERID: number) {
Promise.all([
this.storage.get(this.env.COMPANY_CONFIG_STORAGE_KEY),
this.storage.get(this.env.TOKEN_KEY)
]).then((keys) => {
this.API_URL = keys[0].RESULT[0].APIURL;
this.httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'X-Auth-Token': keys[1][0].TOKEN
})
};
return this.http.get(this.API_URL + 'API/MgmtDashboard/GetDashboardDetails?FLAG=' + flag + '&LOCID=' + LOCID + '&OUSERID=' + OUSERID, this.httpOptions);
});
}
}