AngularJS5.1JavaScript精华

9、使用Promises

Promises,是Javascript表现item的一种方法。它执行异步工作,在未来的某部时刻点成就。遭遇最多的promises,是应用Ajax请求。浏览器在后台发起HTTP请求,当呼吁已毕,会使用promise提示你的运用。在线面,作者创造了一个纤维的AngularJS应用,来做一个Ajax请求。

<!DOCTYPE html>

<html ng-app="demo">

<head>

<title>Example</title>

<script src="angular.js"></script>

<link href="bootstrap.css" rel="stylesheet" />

<link href="bootstrap-theme.css" rel="stylesheet" />

<script type="text/javascript">

var myApp = angular.module("demo", []);

myApp.controller("demoCtrl", function ($scope, $http) {

var promise = $http.get("todo.json");

promise.success(function (data) {

$scope.todos = data;

});

});

</script>

</head>

<body ng-controller="demoCtrl">

<div class="panel">

<h1>To Do</h1>

<table class="table">

<tr><td>Action</td><td>Done</td></tr>

<tr ng-repeat="item in todos">

<td>{{item.action}}</td>

<td>{{item.done}}</td>

</tr>

</table>

</div>

</body>

</html>

作者创立了一个AngularJS模块,给他定义了一个号称demoCtrl的控制器。该控制器采纳$scope对象,提供数据给视图。

该模块,控制器,和视图,

var promise = $http.get("todo.json");

promise.success(function (data) {

$scope.todos = data;

});

$http服务(小编将在第20章描述),用于做Ajax请求,get方法蕴涵你想要从服务器获得的公文的URL。

Ajax请求以异步执行,浏览器继续运行该程序,知道请求已毕。$http.get方法重返一个promise对象,小编可以用来接过关于Ajax请求的升迁。在该例中,笔者利用success方法来注册一个callback函数,当呼吁落成后被触发。Callback函数从服务器接收数据,小编用来打发一个性质给$scope。那时,ng-repeat指令使用to-do
items分发table的内容。Success方法是多个promise对象定义中的一个。

Name

Description

Error(callback)

指定一个callback函数,当Promise不能完成时,被调用

Success(callback)

指定一个callback函数,当Promise完成时,被调用

Then(success,err)

指定一个callback,如果promise成功或失败时被调用

此间有多个方法,以函数作为参数,基于promise的回来状态调用。Success
callback函数,传递从服务器获取的多寡,error callback接收境遇的题材明细。

提示:可以把promise定义的办法,领悟为事件。

具有三种promise方法,重回其他promise对象,允许异步职分链式调用。

<!DOCTYPE html>

<html ng-app="demo">

<head>

<title>Example</title>

<script src="angular.js"></script>

<link href="bootstrap.css" rel="stylesheet" />

<link href="bootstrap-theme.css" rel="stylesheet" />

<script type="text/javascript">

var myApp = angular.module("demo", []);

myApp.controller("demoCtrl", function ($scope, $http) {

$http.get("todo.json").then(function (response) {

$scope.todos = response.data;

}, function () {

$scope.todos = [{action: "Error"}];

}).then(function () {

$scope.todos.push({action: "Request Complete"});

});

});

</script>

</head>

<body ng-controller="demoCtrl">

<div class="panel">

<h1>To Do</h1>

<table class="table">

<tr><td>Action</td><td>Done</td></tr>

<tr ng-repeat="item in todos">

<td>{{item.action}}</td>

<td>{{item.done}}</td>

</tr>

</table>

</div>

</body>

</html>

此地,小编选择then方法四遍,第三遍拍卖$http.get方法的呼应。

愈来愈多的Promise的事例在第20章,和第21章。

 

 

 

 

 

相关文章