AngularJS v1 开发中无法正常获取 Promise 返回值问题求解

问题原因 #

• 核心是异步执行顺序问题：$http.get 是异步请求，返回Promise对象，.then() 绑定的回调函数会等到HTTP请求响应成功之后才会执行，不会阻塞主线程的同步代码。
• 你写在.then() 后面的第444、445行代码是同步执行的，执行时HTTP请求还没返回结果，window.gavinData 还没被赋值，所以输出undefined。
• 你在Chrome控制台展开Window对象能看到gavinData是控制台的特性导致：控制台打印引用类型（比如Window对象）时保存的是对象引用，你手动展开的时机已经是请求完成、gavinData 赋值之后，所以能看到最新的属性值，和代码执行时的实际状态不一致。
• 之前你用var、$scope 存储也拿不到值的原因完全相同，和存储位置无关，是你读取值的时机早于异步回调执行的时机。

解决方案 #

所有需要用到请求返回结果的逻辑，必须放在异步回调内部执行，或者封装为函数后在回调内部调用。AngularJS场景下推荐直接用$scope 存储结果，不需要挂载到全局window上，方便模板渲染和控制器内访问。

示例代码修改： #

angular.module('surveyBuilder').controller('cloneUsersCtrl', cloneUsersCtrlFunction);
cloneUsersCtrlFunction.$inject = ['$http','$scope', '$state', '$stateParams', '$cookies', 'TenantHandler', 'Survey', 'TENANT', 'PERMISSION', 'Notification', '$log'];
function cloneUsersCtrlFunction($http, $scope, $state, $stateParams, $cookies, TenantHandler, Survey, TENANT, PERMISSION, Notification, $log) {
    $scope.surveyId = $stateParams.surveyId; 
    $scope.selectedTenant = '' + TenantHandler.getSelected();
    $scope.canEdit = PERMISSION.edit;
    $scope.activeOnly = false;
    // 初始化数据源变量
    $scope.datasourceList = [];

    var getDatasources = function () {
        return $http.get(apiBase + 'tenants/' + $scope.selectedTenant + '/surveys/' + $scope.surveyId + '/cloneUsers');
    }

    getDatasources()
    .then(function(data) {
        // 赋值给$scope变量
        $scope.datasourceList = data.data;
        // 所有需要用到该数据的逻辑都在这里调用
        handleDatasource();
    })
    .catch(function(err) {
        // 新增错误捕获，避免请求失败无提示
        $log.error('获取数据源失败：', err);
        Notification.error('加载数据失败');
    });

    // 封装数据处理逻辑
    function handleDatasource() {
        // 这里可以正常访问嵌套数组的内容
        console.log('嵌套数组第一项的ID：', $scope.datasourceList[0][0]);
        console.log('嵌套数组第一项的名称：', $scope.datasourceList[0][1]);

        // 遍历所有数组项示例
        $scope.datasourceList.forEach(function(item) {
            console.log('ID: %s，名称: %s', item[0], item[1]);
        });
    }
}

页面渲染示例（如果需要展示到视图）： #

直接用AngularJS的ng-repeat指令遍历即可，$scope变量更新后视图会自动同步：

<ul>
    <li ng-repeat="item in datasourceList track by $index">
        问卷ID：{{item[0]}}，问卷名称：{{item[1]}}
    </li>
</ul>

内容的提问来源于stack exchange，提问作者Gavin Baumanis