zoukankan      html  css  js  c++  java
  • 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>
    sometimes the hardest part isn't letting go,but rather start over
  • 相关阅读:
    nginx+keepalived实现高可用
    zookeeper集群和安装dubbo的管控台
    常见设计模式的解析和实现(C++)
    sed的工作原理(pattern space 和 hold space)
    sed学习笔记
    C++协助破案问题
    C++中extern “C”含义深层探索
    阿里巴巴笔试第28题
    阿里巴巴集团2014校园招聘笔试题(研发工程师--北邮站)
    淘宝数据魔方技术架构解析
  • 原文地址:https://www.cnblogs.com/zhumeiming/p/9813785.html
Copyright © 2011-2022 走看看