javascript - AngularJS 中的异步数据检索

标签 javascript angularjs web

我的 angularjs 应用程序遇到异步问题。

我想要做的是从远程服务器检索数据(在 prefsService.js 中)。然后将数据的值分配给 Controller 中的变量(在 prefsController.js 中)。

这是 prefsService.js 文件:

 (function() {
  'use strict';

  angular
    .module('app')
    .factory('PrefsService', PrefsService);

  PrefsService.$inject = ['$resource','PrefsResource'];

  function PrefsService($resource,PrefsResource) {

    var initialize = function() {
      var twentyFourHourTime = null;
      var decimalTime = null;
      var startDayOfWeek = null;
      var roundingOption = null;
      var roundingIncrement = null;

      PrefsResource.get({key:"TwentyFourHourTime"}, function(data) {
        if (data.result.value === null||undefined) {
            twentyFourHourTime = 0;
        } else {
            twentyFourHourTime = data.result.value;
        }
            PrefsResource.get({key:"DecimalTime"}, function(data) {
              if (data.result.value === null||undefined) {
                  decimalTime = 0;
              } else {
                  decimalTime = data.result.value;
              }
                  PrefsResource.get({key:"startDayOfWeek"}, function(data) {
                    if (data.result.value === null||undefined) {
                        startDayOfWeek = 0;
                    } else {
                        startDayOfWeek = data.result.value;
                    }

                    return {"twentyFourHourTime":twentyFourHourTime,"decimalTime":decimalTime,"startDayOfWeek":startDayOfWeek}
              });
            });
      });


    };

    return {
      initialize: initialize
    };

  }

})();

这是 prefsController.js 文件:

vm.test=PrefsService.initialize();
console.log('Prefs data initialized', vm.test);

当我运行它时,vm.test 总是“未定义”。

我该怎么办?谢谢!

最佳答案

我还没有对此进行语法检查,但它的要点是 promise ,就像所有异步编程一样。这个问题是一个骗子(谁能再找到此类问题的主要骗子?)但以下是如何使用 Angular 来做到这一点:

 (function() {
  'use strict';

  angular
    .module('app')
    .factory('PrefsService', PrefsService);

  PrefsService.$inject = ['$resource','PrefsResource'];

  function PrefsService($resource,PrefsResource) {

    var initialize = function() {

      //return a promise
      return $q
        .all([
          PrefsResource.get({key:"TwentyFourHourTime"}),
          PrefsResource.get({key:"DecimalTime"}),
          PrefsResource.get({key:"startDayOfWeek"})
        ])
        .then(function(values) {
          var 
            twentyFourHourTime = values[0],
            decimalTime = values[1],
            startDayOfWeek = values[2];

          //return the value (object) when all promises have resolved
          return {
            "twentyFourHourTime":twentyFourHourTime.result.value || 0,
            "decimalTime":decimalTime.result.value || 0,
            "startDayOfWeek":startDayOfWeek.result.value || 0
          }
        })
    }


    return {
      initialize: initialize
    };

  }

})();


PrefsService
  .initialize()
  //use the promise API to log messages only after the promise has resolved
  .then(function(prefs) {
    console.log('initialized');
    console.log(prefs);
  })

关于javascript - AngularJS 中的异步数据检索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34139028/

相关文章:

javascript - 禁用 tinymce 可视化编辑器的小书签?

javascript - 在 JavaScript 中检查当前玩家是否赢得了 Tic Tac Toe 游戏

javascript - JQuery .on 方法没有响应

javascript - 使用 Selenium 和 Python 获取脚本的 "var"的值

jquery - 如何在使用 jQuery 滚动时修复 div?

html - 就地编辑内容编辑

javascript - 比较 angularJs 中的两个数组

tomcat - 如何拒绝对 Tomcat 目录的 Web 访问

web - 如何更改 SourceForge 中的项目网页?

javascript - 如何将属性传递给 vue js 上的指令?