AngularJS1: как создать постоянную карту, полученную из API при загрузке приложения

Question

У меня есть приложение angularJS 1, и я создал фабрику, которая вызывает API для извлечения некоторых констант и создает карту, используя их.

app.factory('myFactory', '$http', function($http) {
  this.myMap = {};
  $http({
    method: 'GET',
    url: 'url',
    headers: {'Content-Type': '*/*'}
  }).then(function (response) {
    for (var i in response.data) {
      this.myMap[response.data[i].key] = response.data[i].value;
    }
  }).finally(function() {
    return {
      getMyValue: function(key) {
        return this.myMap[key];
      }
    };
  });
});

Теперь я хочу, чтобы эта фабрика быласоздается и создается только один раз, когда приложение загружается, а затем я хочу вызвать фабричный метод getMyValue () из моего контроллера, чтобы получить значение из Map.

Прямо сейчас, использование приведенного выше кода завершается ошибкой, и это даетмне эта ошибка:

https://code.angularjs.org/1.7.8/docs/error/ng/areq?p0=fn&p1=not%20a%20function,%20got%20string

Как это исправить?

Answer 1

Ваш завод ничего не возвращает.В службе вы присоединяете свои функции и члены к this, но на фабрике вы должны что-то возвращать.

Я вижу, что у вас есть оператор возврата в блоке .finally(), но это ничего не делает дляваша фабрика, так как этот код не находится в области действия до тех пор, пока фабрика не будет создана.

Лично я бы отказался от блока .finally(), так как он не дает вам никаких дополнительных преимуществ:

app.factory('myFactory', '$http', function($http) {
  var myMap = {};
  var apiPromise;

  // this will only run once as soon as the factory is instantiated
  // and will store the resolution of the call for future use
  apiPromise = $http({
        method: 'GET',
        url: 'url',
        headers: {'Content-Type': '*/*'}
     }).then(function (response) {
       for (var i in response.data) {
         myMap[response.data[i].key] = response.data[i].value;
       }
     });


  return {
    getMyValue: function(key) {
      // apiPromise prevents this function from returning until $http call is complete
      // but will not cause the $http call to run again
      return apiPromise.then(function() {
        return myMap[key];
      });
    }
  };

});

Чтобы использовать это, вы должны рассматривать возвращаемое значение как обещание.а не значение:

MyFactory.getMyValue(key).then(function(myMap) {
  console.log(myMap);
});