存储来自ajax调用的全局变量

Question

我有一个从后端返回的2018、2019、2020数组格式的年份列表。现在，我正在使用一个设置控制器进行ajax调用，并将其设置为要由我的ember-power-select使用的值。但是，我只需要这样做一次，就像在应用程序加载时一样，并将其作为全局变量，而不是每次加载控制器时，因为这个数组很少改变。

我该怎么做呢？

Answer 1

忘了全局变量吧。您需要的是应用程序范围的可用性，这是通过使用services获得的。服务(默认情况下)由应用程序的依赖项注入容器创建为单例，因此，您可以选择在任何地方注入它。

看看我为你组装的这个twiddle。我做了一个小的模拟服务，当可用时使用一个缓存值。对我来说，这比使用promise感知的计算属性更简单(尽管有可用的实现)。

export default Ember.Service.extend({
  loadDates(){
    if(this.dates){
      return Ember.RSVP.resolve(this.dates);
    }else{
      return this._loadAndCacheDatesFromApi(); 
    }
  },
  _loadAndCacheDatesFromApi(){
    // this is actually an api call in your case
    return new Ember.RSVP.Promise((resolve) => {
      setTimeout(() => {
        this.set('dates', ['2019', '2020', '2021']);
        resolve(this.dates);
      }, 5000);
    });
  }
});

我们希望我们的loadDates无论是从应用程序接口加载还是从缓存加载，行为都是一样的，所以我们让函数总是返回一个promise (在缓存的情况下使用resolve函数)。我只是为了说明而使用了一个setTimeout……您实际上应该在这里进行api调用，并在返回时将dates存储为服务上的一个属性。

现在，任何想要加载它的路由都会注入服务(通过Ember依赖注入框架)，然后简单地在setupController中进行服务调用

import { inject as service } from '@ember/service';
export default Ember.Route.extend({
  dateService: service() // this is shorthand for service('date-service'),
  setupController(controller, model){
    let dateService = this.get('dateService');
    return dateService.loadDates().then((dates) => {
      controller.set('dates', dates);    
    });
}

正如您在这里看到的，无论此代码是命中缓存还是从api返回，对调用代码都是不透明的。值得注意的是，这是因为服务是单例的(即第一次使用时只创建了一个实例)，这一点很重要。这样，设置的属性才是真正共享的。对应用程序的刷新显然会丢失该值(如果需要更多长期存储，可以将其存储在本地存储中)。