<!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>