http调用Angular后如何更新全局变量答案

【问题标题】：How to update global variable after http call Angularhttp调用Angular后如何更新全局变量
【发布时间】：2017-04-21 02:02:59
【问题描述】：

我有一个全局变量，我需要在 http get 调用后更新它。更新后，我需要将此更新后的变量传递给其他函数。我不明白什么是最好的方法来做到这一点。这是我的代码：

    app.controller('myCtrl', function($scope, $http) {
     var data = '';
     $http.get("data.json")
       .then(function(response) {
        data = response.data;
     });
     vm.mapOptions = {
        controls: {
            navigator: false
        },
        center: [40, -35],
        zoom: 3,
        layers: [{
            style: {
                fill: {
                    color: '#1996E4'
                },
                stroke: {
                    color: '#FFFFFF'
                }
            },
            type: 'shape',
            dataSource: data
        }],
        shapeCreated: onShapeCreated,
        shapeFeatureCreated: onShapeFeatureCreated
    };
    });

http调用后是否可以更新全局变量？

提前感谢您的帮助。

【问题讨论】：

这可能是任何 vm 的问题。您的代码应该更新数据源，但是如果该数据源发生更改，您确定 vm 会“重新渲染”吗？
你可以通过console.log(data)查看它的值是否在你期望的时候发生变化。
目前还不清楚您要在这里完成什么。通常，您应该使用服务而不是“全局变量”。此外，您没有显示在这里声明 vm 的位置，或者如何使用 dataSource，但是由于您将 data 声明为原始字符串，因此它可能无法按预期工作，尤其是在出现 response.data 之后成为 JSON....

标签： javascript angularjs

【解决方案1】：

当你做一个http请求时，发送请求并得到响应需要一些时间，特别是当你将请求发送到服务器上的API时，但同时执行会立即继续，并且在你的http调用之后的语句被执行，如果你有一些依赖于响应的东西，最正确的是会失败。

在您的情况下，vm.mapOptions 依赖于 data，这是一个从 get 请求中获取响应的局部变量。那你能做什么呢？

第 1 步：

为您的响应涉及的所有代码创建一个函数：

$scope.myCallBack = function(data){
  vm.mapOptions = {
    controls: {
        navigator: false
    },
    center: [40, -35],
    zoom: 3,
    layers: [{
        style: {
            fill: {
                color: '#1996E4'
            },
            stroke: {
                color: '#FFFFFF'
            }
        },
        type: 'shape',
        dataSource: data
    }],
    shapeCreated: onShapeCreated,
    shapeFeatureCreated: onShapeFeatureCreated
   };

}

第 2 步：得到响应后立即调用 $http.get 中的 myCallBack 函数

var data = '';
 $http.get("data.json")
   .then(function(response) {
    data = response.data;
    $scope.myCallBack(data);
 });

【讨论】：