运行方法中的Angular$q服务实现

Angular $q service implementation in run method

本文关键字：服务 实现 Angular 方法 运行      更新时间：2023-09-26

我有一个例子，通过全局loadJSON函数从本地文件加载一些数据（全局不是强制性的，但更可取）。

之后，我等待所有文档中的数据加载并打印'i ve loaded'字符串。

问题是，我开始使用来自"x"服务的数据的时间早于我设法将其从文件完全上传到内存的时间。

如何等到数据加载后才继续渲染页面并执行所有内容？

问题我需要使用$q，但我该怎么做？

function loadJSON(file, callback) {
  var doc = new XMLHttpRequest();
  doc.overrideMimeType("application/json");
  doc.open('GET', file, true);
  doc.onreadystatechange = function () {
    if (doc.readyState == 4 && doc.status == "200") {
      callback(JSON.parse(doc.responseText));
    }
  };
  doc.send(null);
}
angular
  .module('msApp')
  .factory('service.x', [
    function () {
      var _database = {};
      return {
        get: function (k1, k2) {
          return _database[k1][k2];
        },
        load: function (list, callback) {
          var length = list.length;
          var loaded = 0;
          function addToDB(name) {
            var url = './assets/{0}.json'.format(name);
            loadJSON(url, function (json) {
              _database[name] = json;
              loaded++;
              if (length === loaded && callback) callback();
            });
          }
          for (var i = 0; i < list.length; i++) {
            addToDB(list[i]);
          }
        }
      };
    }
  ]);
angular
  .module('msApp', [])
  .run([
    '$rootScope',
    'service.x',
    function ($rootScope, x) {
      x.load($rootScope.services, function () {
        console.log('i ve loaded')
      });
    }
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/sign', {
        templateUrl: '../views/sign.html',
        controller: 'signCtrl'
      })
      .when('/a', {
        templateUrl: '../views/a.html',
        controller: 'aCtrl'
          .otherwise({
            redirectTo: '/signin'
          });
  });

控制器接受resolve参数，该参数允许您将依赖项注入控制器中，这些依赖项可以是原始对象或承诺，阻止控制器的实例化，直到它被解决：

$routeProvider.when('/routeA', {
  templateUrl: '/routeA.html',
  controller: 'controllerA',
  resolve: {
    mydata: ['service.x', function (x) {
      return x.load($rootScope.services);
    }]
  }
});

需要修改load和addToDb函数以返回promise：

load: function (list) {
  // instantiate variables
  function addToDb(name) {
    var deferred = $q.defer();
    // build url from name
    loadJson(url, function (data) {
      // save to database
      deferred.resolve(data);
    });
    return deferred.promise;
  }
  var promises = [];
  for (var i = 0; i < list.length; i++) {
    promises.push(addToDb(list[i]));
  }
  return $q.all(promises);
}
相关文章：