AngularJS:使用异步数据初始化服务

如何解决AngularJS:使用异步数据初始化服务?

开发过程中遇到AngularJS:使用异步数据初始化服务的问题如何解决?下面主要结合日常开发的经验,给出你关于AngularJS:使用异步数据初始化服务的解决方法建议,希望对你解决AngularJS:使用异步数据初始化服务有所启发或帮助;

问题描述

你看了$routeProvider.when('/path',{ resolve:{...}吗?它可以使诺言方法更加简洁:

在您的服务中兑现承诺:

app.service('MyService', function($http) {
    var myData = null;

    var promise = $http.get('data.Json').success(function (data) {
      myData = data;
    });

    return {
      promise:promise,
      setData: function (data) {
          myData = data;
      },
      doStuff: function () {
          return myData;//.getSomeData();
      }
    };
});

添加resolve到您的路由配置:

app.config(function($routeProvIDer){
  $routeProvIDer
    .when('/',{controller:'MainCtrl',
    template:'<div>From MyService:<pre>{{data | Json}}</pre></div>',
    resolve:{
      'MyServiceData':function(MyService){
        // MyServiceData will also be injectable in your controller, if you don't want this you Could create a new promise with the $q service
        return MyService.promise;
      }
    }})
  }):

解决所有依赖关系之前,不会实例化您的控制器:

app.controller('MainCtrl', function($scope,MyService) {
  console.log('Promise is Now resolved: '+MyService.doStuff().data)
  $scope.data = MyService.doStuff();
});

我在plnkr上做了一个例子:http ://plnkr.co/edit/GKg21XH0RwcmeQGUdZKH?p=prevIEw

解决方法

我有一个AngularJS服务,我想使用一些异步数据进行初始化。像这样:

myModule.service('MyService',function($http) {
    var myData = null;

    $http.get('data.json').success(function (data) {
        myData = data;
    });

    return {
        setData: function (data) {
            myData = data;
        },doStuff: function () {
            return myData.getSomeData();
        }
    };
});

显然,这是行不通的,因为如果doStuff()myData返回之前尝试进行调用,我将得到一个空指针异常。据我从阅读这里这里提出的其他一些问题中所知道的,我有一些选择,但是它们似乎都不是很干净(也许我错过了一些东西):

安装服务“运行”

设置我的应用程序时,请执行以下操作:

myApp.run(function ($http,MyService) {
    $http.get('data.json').success(function (data) {
        MyService.setData(data);
    });
});

然后我的服务将如下所示:

myModule.service('MyService',function() {
    var myData = null;
    return {
        setData: function (data) {
            myData = data;
        },doStuff: function () {
            return myData.getSomeData();
        }
    };
});

这有时会起作用,但是如果异步数据恰好比初始化所有东西花费的时间更长,则在我调用时会得到一个空指针异常 doStuff()

使用承诺对象

这可能会起作用。我调用MyService的所有地方唯一的缺点是,我必须知道doStuff()返回了一个promise,所有代码都必须与我们then交互才能与promise交互。我宁愿等到myData返回之后再加载我的应用程序。

手动引导

angular.element(document).ready(function() {
    $.getJSON("data.json",function (data) {
       // can't initialize the data here because the service doesn't exist yet
       angular.bootstrap(document);
       // too late to initialize here because something may have already
       // tried to call doStuff() and would have got a null pointer exception
    });
});

全局Java语言Var 我可以将JSON直接发送到全局Java语言变量:

HTML:

<script type="text/javascript" src="data.js"></script>

data.js:

var dataForMyService = { 
// myData here
};

然后在初始化时可用MyService

myModule.service('MyService',function() {
    var myData = dataForMyService;
    return {
        doStuff: function () {
            return myData.getSomeData();
        }
    };
});

这也可以,但是我有一个全局的javascript变量,它闻起来不好。

这些是我唯一的选择吗?这些选择之一比其他选择更好吗?我知道这是一个很长的问题,但我想表明我已尝试探索所有选择。任何指导将不胜感激。

编程问答相关问答

我的环境详情: <ul> <li>操作系统:Ubuntu 20.04</li> <li>节点版本:9.6.1</li> <li>Qt 版本:5.9.1</li> </ul> 我
此问题使用 <a href="https://people.ucsc.edu/%7Emclapham/eart125/data/georoc.csv" rel="nofollow noreferrer">https://people.ucsc.edu/~
对不起,我正在绞尽脑汁想办法解决这个问题。 我的 kafka 代理说等待连接到 Zookeper 然后关闭(超时)
我有一个 pypsark 数据框保存为 <code>temp_view</code>,我需要将它保存到 <code>Table2</code> 中的 <code>DB2</code>
我想在 <a href="https://www.brightsign.biz/digital-signage-products/XT-product-line/XT1144" rel="nofollow noreferrer">BrightSign XT114
我对 sql 很陌生,一直在尝试使用以下脚本对其进行参数化。 <strong>这是我的代码:</strong> <pre><
<ol> <li>现在我正在考虑为 android 开发一个应用程序并想要获取位置信息。</li> <li>所以我决定使用 xamarin 的
我正在使用 TestNg 运行并行测试,我想在脚本中的某些点停止/终止线程。这个脚本有很多层,所以简单
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注