javascript - 等待所有数据加载完毕。 AngularJS

Question

我正在编写一个从 JASON 文件调用数据的代码。我遇到了异步问题，并看到了很多关于同一问题的帖子。

我写了一些代码，我想它可以解决我的问题。但是，似乎数据仍未加载。

我会更具体地回答我的问题。我使用下面的 promise 方法。我认为在所有数据完全加载之前不应返回“问题”。显然，“问题”，里面什么也没有，被返回到我的页面。

我的promise方法正确吗？如果不是，我该如何解决这个问题。有人可以帮帮我吗？

(function(){

angular
    .module("GrammarQuiz")
    .factory("DataService", DataFactory);
    function DataFactory($log, $q, $http, $timeout){
        var vm = this
        var questions = getData() ;
        vm.getData = getData;

        function getData(){
            var defer = $q.defer()
            $http.get('api/data1.json')
            .success(function(res){
                questions = res;
                $log.log('success');
                defer.resolve(res);
            })
            .error(function(err, status){
                $log.log('fail');
                defer.reject(err);
            })
            return defer.promise;
        }


        $log.log('check');
        $log.log(questions[0]);

        return questions;
    }  


})();

Answer 1

您所展示的不是使用 Promise 的正确方法。相反，您应该执行类似于以下内容的操作:

工厂(服务)

.factory("DataService", DataFactory);

function DataFactory($http) {
    var service = {};
    service.getData = function () {
        return $http.get('api/data1.json')
            .then(function(response) {
                return response.data;
            });
        };
    return service;
}

Controller

.controller("MyController", MyController);

function MyController($scope, DataService) {
    $scope.questions = {}; // or $scope.questions = []; if the return type is an array
    DataService.getData()
        .then(function(data) {
            $scope.questions = data;
        })
        .catch(function(errorResponse) {
            // do something with the error
        });
}