AngularJS $q

最新推荐文章于 2025-04-22 18:13:09 发布

书香水墨

最新推荐文章于 2025-04-22 18:13:09 发布

阅读量820

点赞数

分类专栏：前端文章标签： AngularJS

本文链接：https://blog.csdn.net/qq_27870421/article/details/89195145

版权

前端专栏收录该内容

179 篇文章

订阅专栏

$q用于执行异步操作

`一、基本用法`


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS</title>
    <script src="angular.min.js"></script>
    <!--<script src="angular-route.min.js"></script>-->
    <script src="angular-translate.min.js"></script>
    <script src="angular-translate-loader-static-files.js"></script>
    <!--<script src="angular-cookie.min.js"></script>-->
</head>
<body ng-app='index' ng-controller="indexController">



</body>

<script>

    angular.module('index',[]);


    angular.module('index').controller('indexController',['$scope','$injector',
        function indexController($scope, $injector){
        var indexFactory = $injector.get('indexFactory');

        // 在执行此异步方法时，不会影响其他代码执行
        indexFactory.then(function (value) {
            // 成功
            console.log('value:', value);
        },function (reason) {
            // 失败
        });

        console.log("end");

    }]);


    angular.module('index').factory('indexFactory', ['$injector', function translationLoader($injector) {
        // 必要的服务
        var $http = $injector.get('$http');
        var $timeout = $injector.get('$timeout');
        var $q = $injector.get('$q');

        // 创建一个deferred
        var deferred = $q.defer();

        $http({
            method  : 'POST',
            url     : '/T/zh.json'
        }).then(function (res) {
            $timeout(function () {
                deferred.resolve(res.data); // 异步请求成功执行deferred.resolve
            }, 1000* 10);
        },function() {
            deferred.reject("fail"); // 任务失败执行
        });

        console.log("translation.promise:", deferred.promise);

        return deferred.promise;

    }]);
</script>
</html>

`二、$q多个promise串行`

function f1() {
    var defer = $q.defer();
   setTimeout(function() {
       defer.resolve(1);
   }, 2000);
   return defer.promise;
}

function f2() {
    var defer = $q.defer();
    setTimeout(function() {
        defer.resolve(2);
    }, 2000);
    return defer.promise;
}

function f3() {
    var defer = $q.defer();
    setTimeout(function() {
        defer.resolve(3);
    }, 2000);
    return defer.promise;
}

//f1进行完，在进行f2，然后进行f3，后一个程序等待前一个完成
f1().then(function (data) {
    console.log(data);  // 2s后打印1
    return f2();
}).then(function (data) {
    console.log(data);   // 再过2s后打印2
    return f3();
}).then(function (data) {
    console.log(data);　　// 再过2s后打印3
});

`三、 $q.all`

$q.all，表示只有当传入的多个deferred执行成功才算成功

var p=$q.all({
    dataA:deferA.promise,
    dataB:deferB.promise
})
p.then(function(result){
    console.log(result.dataA); // this is DATA A
    console.log(result.dataB); // this is DATA B
})