Fatal编程技术网
  • angularjs/
  • Angularjs 在执行其余代码之前，等待异步结果返回

Angularjs 在执行其余代码之前，等待异步结果返回

angularjs ajax asynchronous

Angularjs 在执行其余代码之前，等待异步结果返回,angularjs,ajax,asynchronous,parse-server,Angularjs,Ajax,Asynchronous,Parse Server,我正在用AngularJS编写这个模块，使用ParseServer数据库存储和检索我的对象 当模块初始化时，我想查询数据库并显示保存在那里的所有句子作为列表 controller.js： Parse.initialize("[APPID]", "[MASTERKEY]"); Parse.serverURL = 'http://localhost:1337/parse'; angular.module('CorrectionModule', ['ngMaterial', 'ngSanitize']

我正在用AngularJS编写这个模块，使用ParseServer数据库存储和检索我的对象

当模块初始化时，我想查询数据库并显示保存在那里的所有句子作为列表

controller.js：

Parse.initialize("[APPID]", "[MASTERKEY]");
Parse.serverURL = 'http://localhost:1337/parse';
angular.module('CorrectionModule', ['ngMaterial', 'ngSanitize'])
.controller('SentenceCorrectionCtrl', ['$rootScope', '$mdDialog', '$scope',
    function($rootScope, $mdDialog, $scope) {
        $rootScope.sentences = [];

        var obj = Parse.Object.extend("Sentence");
        var queryObject = new Parse.Query(obj);

        queryObject.find({
            success: function(result) {
                for (var i = 0; i < result.length; i++) {
                    $rootScope.sentences.push(result[i]);
                }
                console.log('Found ' + $rootScope.sentences.length + ' objects');
            },
            error: function(error) {
                console.log('Error ' + error.code + ': ' + error.message);
            }
        });

        $rootScope.currentUser = 'Student';
        $scope.switchUser = function() {
                if ($rootScope.currentUser == 'Teacher') {
                    $rootScope.currentUser = 'Student'
                } else if ($rootScope.currentUser == 'Student') {
                    $rootScope.currentUser = 'Teacher';
                }
            }

        $scope.addSentence = function() {
            var parentEl = angular.element(document.body);

            $mdDialog.show({
                parent: parentEl,
                templateUrl: "student-add-sentence.tmpl.html",
                controller: StudentAddController
            });

            function StudentAddController($scope, $mdDialog, $rootScope) {
                // $scope.user = $rootScope.currentUser;
                $scope.sentence = null;
                $scope.error = false;
                // SentenceObject = new Parse.Object('Sentence');

                $scope.saveSentence = function() {
                    if (!$scope.sentence){
                        $scope.error = 'Please add a sentence';
                    } else {
                        $scope.error = false;
                    }

                    if (!$scope.error){
                        // SentenceObject.set("sentence", $scope.sentence);
                        // SentenceObject.save(null, {
                        //     success: function(parseObject){
                        //         console.log('Saved[' + SentenceObject.id + ']: ' + $scope.sentence);
                        //         $rootScope.sentences.push($scope.sentence);
                        //         $scope.sentence = null;
                        //     },
                        //     error: function(parseObject, error) {
                        //         console.log('Error code: ' + error);
                        //     }
                        // });
                        $rootScope.sentences.push($scope.sentence);
                        $mdDialog.hide();
                    } 
                }

                $scope.cancel = function(){
                    $mdDialog.hide();
                }
            }
        }
    }
]);

Parse.initialize（“[APPID]”，“[MASTERKEY]”）；
Parse.serverURL=http://localhost:1337/parse';
角度.module（'CorrectionModule'，['ngMaterial'，'ngSanitize']））
.controller（'SentenceCorrectionCtrl'、['$rootScope'、'$mdDialog'、'$scope'，
函数（$rootScope，$mdDialog，$scope）{
$rootScope.statemens=[]；
var obj=Parse.Object.extend（“句子”）；
var queryObject=newparse.Query（obj）；
查询对象查找({
成功：功能（结果）{
对于（变量i=0；i
index.html：

<html>
<title></title>

<head>
<!-- Angular Material CSS now available via Google CDN; version 1.0.7 used here -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
</head>

<body ng-app="CorrectionModule" ng-controller="SentenceCorrectionCtrl" layout="column">
<!-- Container #1 (see wireframe) -->
<md-toolbar layout="row">
    <h1>Correction</h1>
</md-toolbar>
<div>
    <md-button ng-click="addSentence()" ng-if="currentUser=='Student'">Add Sentence</md-button>
    <!-- <md-button ng-click="" ng-if="currentUser=='Teacher'"> -->
    <br/>
</div>
<ul>
    <li ng-repeat="x in sentences">{{ x }}</li> 
</ul>
<md-button ng-click="switchUser()">Logged in as {{ currentUser }}</md-button>
<!-- Utilities script -->
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-latest.js"></script>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 1.0.7 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>
<!-- Custom controllers for different views -->
<script src="controller.js"></script>
</body>

</html>


校正
加句



    

  • {{x}
    • 


以{currentUser}身份登录
问题是，当我运行代码时，它不会显示任何内容，直到我按下调用对话框窗口的按钮

查询与代码的其余部分异步运行，但我需要它运行，然后代码的其余部分才能继续

我搜索了一些其他的解决方案，包括生成一个调用结果的显式函数，但结果是一样的

提前感谢您在这方面的帮助。

如果您将代码的其余部分封装在一个函数中，您只需从success内部调用该函数即可。这有什么不起作用的原因吗

或者，您可以使用一个布尔变量来标记代码的其余部分是否应该运行。然后使用$interval测试变量，直到它准备就绪。这里有一个小例子

var isReady = false;

...
queryObject.find({
    success: function() {
        isReady = true;
    },
    error: function() {
        ...
    });
...

var interval = $interval(function() {
    if (isReady) {
     // call the code you want to execute 
     // after the async operation is finished
    }
}, 500); // how often you want to check if the operation is finished
要等待异步结果，请使用 
$q
——一种帮助您异步运行函数，并在处理完函数时使用其返回值（或异常）的服务。

要等待异步结果返回，请在执行其余代码之前，将
queryObject.find
调用转换为承诺，然后从该承诺中链接

创造承诺

//Created Deferred Object
var findDeferred = $q.defer();

//Resolve Deferred Object;
queryObject.find({
    success: function(result) {
        findDeferred.resolve(result);
    },
    error: function(error) {
        findDeferred.reject(error);
    }
});

//Create promise from Deferred Object
var findPromise = findDeferred.promise;

//Create derived promise
var derivedFindPromise = findPromise.then( function onSuccess(result) {
    var sentences = [];
    for (var i = 0; i < result.length; i++) {
        sentences.push(result[i]);
    }
    console.log('Found ' + sentences.length + ' objects');
    //return to chain data
    return sentences;
}).catch( function onReject(error) {
    console.log('Error ' + error.code + ': ' + error.message);
    //throw to chain error
    throw error;
});

//Use derived promise
derivedFindPromise.then(function onSuccess2(sentences) {
    $scope.sentences = sentences;
    //Call subsequent functions here
});
承诺链

//Created Deferred Object
var findDeferred = $q.defer();

//Resolve Deferred Object;
queryObject.find({
    success: function(result) {
        findDeferred.resolve(result);
    },
    error: function(error) {
        findDeferred.reject(error);
    }
});

//Create promise from Deferred Object
var findPromise = findDeferred.promise;

//Create derived promise
var derivedFindPromise = findPromise.then( function onSuccess(result) {
    var sentences = [];
    for (var i = 0; i < result.length; i++) {
        sentences.push(result[i]);
    }
    console.log('Found ' + sentences.length + ' objects');
    //return to chain data
    return sentences;
}).catch( function onReject(error) {
    console.log('Error ' + error.code + ': ' + error.message);
    //throw to chain error
    throw error;
});

//Use derived promise
derivedFindPromise.then(function onSuccess2(sentences) {
    $scope.sentences = sentences;
    //Call subsequent functions here
});

//创建派生承诺
var derivedFindPromise=findPromise.then（函数onSuccess（结果）{
var语句=[]；
对于（变量i=0；i
因为调用承诺的
.then
方法会返回一个新的派生承诺，所以很容易创建一个承诺链

可以创建任意长度的链，并且由于一个承诺可以用另一个承诺解决（这将进一步推迟其解决），因此可以在链中的任何点暂停/推迟承诺的解决。这使得实现强大的API成为可能

--

感谢您的帮助，它将所有内容同步在一起