angularjs中的Promise异步操作($q) 

angularjs的Promise方式是自己封装了一个对象，$q

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>angularjs中的promise</title>


    <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>

</head>
<body ng-app="myApp">

     <div ng-controller="main">

         {{data1}}---{{data2}}---{{data3}}

     </div>

    <script type="text/javascript">


    //之前用的jquery方式
        //$.ajax({
        //    url: "Data/1.txt",
        //    dataType: "json",
        //    success(data1) {

        //        $.ajax({
        //            url: "Data/2.txt",
        //            dataType: "json",
        //            success(data2) {
        //                $.ajax({
        //                    url: "Data/3.txt",
        //                    dataType: "json",
        //                    success(data3) {
        //                        console.log(data1, data2, data3);
        //                    }
        //                })
        //            },
        //            error() {
        //                alert("失败");
        //            }
        //        });
        //    }
        //})


        //jquery的Promise方式
        //Promise.all([
        //    $.ajax({url:"Data/1.txt",dataType:"json"}),
        //    $.ajax({url:"Data/2.txt",dataType:"json"}),
        //    $.ajax({ url: "Data/2.txt", dataType: "json" })
        //]).then((arr) => {
        //    let [data1, data2, data3] = arr;
        //    console.log(data1,data2,data3);
        //}, (err) => { alert("失败了"); });



        //angularjs的Promise方式是自己封装了一个对象，$q
        angular.module("myApp", [])
            .controller("main", ["$scope", "$http", "$q", function ($scope, $http, $q) {

                $q.all([
                    $http.get("data/1.txt"),
                    $http.get("data/2.txt"),
                    $http.get("data/3.txt")
                ]).then((arr) => {
                    console.log(arr);
                    $scope.data1 = arr[0].data;
                    $scope.data2 = arr[1].data;
                    $scope.data3 = arr[2].data;
                }, (err) => {
                    alert("失败了");
                })


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

 

posted @ 2018-10-18 22:51  Z.ain  阅读(598)  评论(0)  编辑  收藏  举报