Setting/Getting Ionic Storage 中的对象和值

Question

我正在为大学做一个简单的天气应用程序项目，我真的很头疼使用离子存储来返回已传递到存储的 return 值。该应用程序相当基础，从 API 获取 lat/lon 值，将它们保存在存储中，然后将它们传递给另一个 API 以获取更多信息并将其显示在主页上。

我可以从 API 中获取值，最初非常简单，我已经从 API 中提取了我需要的相关信息，并将它们存储在一个对象 cityInfo 中，位于提供程序内（下面，这可能是非常不正确的方法，因此欢迎所有建议。

private cityInfo = {
    cca2: "",
    commonName: "",
    flag: "",
    lat:  0,
    lng: 0
  };

然后我将存储中的值设置如下

packCityInfo(cityData: any): void {
    this.cityInfo.cca2 = (cityData[0].cca2);
    this.cityInfo.commonName = (cityData[0].name.common);
    this.cityInfo.flag = (cityData[0].flags.png);
    this.cityInfo.lat = (cityData[0].latlng[0]);
    this.cityInfo.lng = (cityData[0].latlng[1]);
this.storage.set('cityInfo', this.cityInfo);

如果我 console.log(cityInfo) 它会正确打印不同属性的不同值，即

cca2: "GB"
commonName: "United Kingdom"
flag: "https://flagcdn.com/w320/gb.png"
lat: 54
lng: -2

我遇到的问题是弄清楚如何从存储中访问这些值。我认为我遇到的问题与同步性有关。我发现我第一次尝试保存我的设置时，请求会失败并提示“.lat is undefined”，但第二次我保存我的设置时，请求会成功，我将从 API 来自存储的请求。

我的 saveSettings() 函数在我的 settings.ts 页面中有以下

this.storage.set('city', this.cityName);
    this.storage.set('units', this.units);

    this.cityDataService.getCityDataFromAPI(this.cityName);

    this.storage.get("cityInfo").then((val) => {
      let cityInfo = val;
      // return val;
      this.weatherService.getWeatherFromApiCoordinates(cityInfo.lat, cityInfo.lng, this.units);
    }).catch((err) => {
      console.log(err);
    });

Returns “TypeError：无法读取 null 的属性（读取 'lat'）在 settings.ts:48"

这些服务非常标准，只处理 http get 请求，所以我认为问题不在于它们？（可能是错的）

getWeatherFromApiCoordinates(lat: number, lon: number, units: string) : void  {
    let weatherData = this.http.get('https://api.weatherbit.io/v2.0/current?lat=' + lat + '&lon=' + lon + "&key=" + this.apiKey + '&units=' + units);
    weatherData.subscribe(data => {
      let currentWeather = data;

      this.packWeatherData(currentWeather);
    });
  }

第二次 saveSettings() 函数运行它将正确显示值，但它是从先前设置的值中提取的。例如我运行

都柏林，
都柏林，
法国。它将 return 1.Err, 2.Dublin, 3.Dublin.

每次清除存储时都会运行错误最初obv

我对 promises 和同步性的概念不太了解，因此非常感谢任何帮助。（我大体上理解这些概念，但实际上不是那么多）

Answer 1

似乎是一个竞争条件，当您调用 get 时，http 请求仍在执行并且存储值未设置存储。将数据设置到离子存储是异步的。如果您需要等待某事发生，您可以随时调用 async ... await on storage:

async doSomething() {
 await this.storage.set(...)
 await this.storage.get(...) // here is available!
}

尽管您也有使用 observables 的 http 请求。您当然也可以将它们变成 promise，或者以其他方式链接它们，以便在需要时正确地拥有所有数据。

我什至没有看到你需要在这里等待存储，为什么不使用switchMap来执行第二个请求呢需要上一个的响应才能执行下一个。这就是我会做的，所以只是一个建议...

服务：

getCityDataFromAPI() {
  return this.http.get(....)
}

getWeatherFromApiCoordinates(...)  {
  return this.http.get(...);
}

那么组件会做：

this.weatherService.getCityDataFromAPI().pipe(
  switchMap(cityData => {
    return this.weatherService.getWeatherFromApiCoordinates(cityData[0].latlng[0], cityData[0].latlng[1], this.units)
  })
).subscribe(console.log)

如果您需要在存储中保存以备将来使用，您可以随时使用 tap.

来处理副作用

Setting/Getting Ionic Storage 中的对象和值

Setting/Getting Objects and values from Ionic Storage

angular

typescript

ionic-framework

ionic3