angularjs中的Promise非同步操作($q)
阿新 • • 發佈：2018-11-10
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>