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
  • 相关阅读:
    面试题 31: 求子数组的最大和
    [面试] 结构体占用空间的问题,内存对齐~! 真的懂了,cpu取加快速度,省空间来考虑。
    [计算机] 32768~32767 计算机中的 1 表示
    C#跨线程调用窗体控件
    合并字节数组
    将汉字转化为2位大写的16进制Unicode
    关公与子龙两大杀手
    早年的J2EE笔记
    给小组新成员的一份信
    c++虚函数详解
  • 原文地址:https://www.cnblogs.com/zhumeiming/p/9813785.html
Copyright © 2011-2022 走看看