本文内容来自《Pro AngularJS》,原文作者为Adam Freeman。
翻译过程中加入了译者的理解,并作了适当的筛减。
promise是JavaScript中处理异步事务的一种方式,这样的事务会在后续的某个时间点上完成。通常会在使用Ajax请求的时候使用到promise,浏览器在后台发起HTTP请求,并且在请求完成后使用promise通知相应的应用程序。以下程序示例,演示了一个极简单的AngularJS应用,并在其中调用Ajax请求。
<!DOCTYPE html> <html ng-app="demo"> <head> <meta charset="utf-8"> <title>Example</title> <link rel="stylesheet" href="bootstrap.css"> </head> <body ng-controller="demoCtrl"> <div class="panel"></div> <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> <script src="angular.js"></script> <script> var app = angular.module('demo', []); app.controller('demoCtrl', ['$scope', '$http' function ($scope, $http) { var promise = $http.get('todo.json'); promise.success(function(data){ $scope.todos = data; }) }]) </script> </body> </html>
为了演示promise是如何工作的,我还需要设置AngularJS中的模块、控制器、视图等组成部分。其中关键的代码如下:
var promise = $http.get('todo.json'); promise.success(function(data){ $scope.todos = data; });
$http服务用来发起Ajax请求,它的get方法接受你想从服务端获得文件的URL作为参数。
Ajax请求的处理是异步的,在这个请求的过程,浏览器会继续执行其它的代码。$http.get方法会返回一个promise对象,通过这个对象可以获取Ajax请求的相关信息。如在这个例子中,我使用了success方法来注册一个回调函数,这个回调函数将在请求成功完成之后被调用。回调函数接收从服务端返回的数据,我将这些数据赋值给了$scope对象的todos属性,这样,也为ng-repeat指令提供了在表格中需要显示的内容。success方法是在promise对象中定义的三个方法中的其中一个,如下表所示:
promise对象中定义的方法
名称 | 描述 |
error(callback) | 指定一个回调函数,这个回调函数将在promise处理的任务未能成功完成时被调用 |
success(callback) | 指定一个回调函数,这个回调函数将在promise处理的任务成功完成时被调用 |
then(success, err) | 为promise分别指定一个执行成功或失败的回调函数 |
三个方法的参数都是函数,而这些函数将根据promise执行的结果决定是否被执行。可以将从服务端获得的数据传给success方法的回调函数中,而error方法的回调函数中可以得到错误的详细信息。
三个promise方法还可以返回其他的promise对象,这样就可以将异步的任务通过链式的写法写在一起,如下:
<!DOCTYPE html> <html ng-app="demo"> <head> <meta charset="utf-8"> <title>Example</title> <link rel="stylesheet" href="boostrap3/css/bootstrap.min.css" /> </head> <body ng-controller="demoCtrl"> <div class="panel"> <h1>To Do</h1> <table class="table table-striped"> <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> <script src="js/angular/angular.min.js"></script> <script> var myApp = angular.module('demo', []); myApp.controller('demoCtrl', ['$scope', '$http', function($scope, $http){ $http.get('data/todo.json').then(function(response){ $scope.todos = response.data; }, function(){ $scope.todos = [{action: 'Error'}]; }).then(function(){ $scope.todos.push({action: 'Request Complete'}) }) }]) </script> </body> </html>
这里两次使用了then方法,第一次用以处理$http.get请求的响应,并且还注册了一个随后会被调用的函数。这样的代码可能会难以阅读,所以下面可以分步来了解它们。首先,调用get方法来创建一个Ajax请求:
$http.get('data/todo.json').then(function(response){ $scope.todos = response.data; }, function(){ $scope.todos = [{action: 'Error'}]; }).then(function(){ $scope.todos.push({action: 'Request Complete'}) });
接着,使用then方法,并且提供了在Ajax请求完成时会被调用的回调函数。当请求成功时会调用第一个函数,而失败时会执行第二个函数。
$http.get('data/todo.json').then(function(response){ $scope.todos = response.data; }, function(){ $scope.todos = [{action: 'Error'}]; }).then(function(){ $scope.todos.push({action: 'Request Complete'}) });
promise确保了这两个函数会被执行,但是只有在Ajax请求成功完成或失败的时候才会执行。随后再次使用了then方法添加了另一个函数:
$http.get('data/todo.json').then(function(response){ $scope.todos = response.data; }, function(){ $scope.todos = [{action: 'Error'}]; }).then(function(){ $scope.todos.push({action: 'Request Complete'}) });
这次只传了一个函数给then方法,意味着我们不处理出错的情况。最后个函数不管前面的函数是否被调用都会想数据模型里面添加一个数据项。Ajax请求调用成功的效果如下图所示:
相关推荐
使用promises的“child_process”模块的简单包装器_JavaScript_下载.zip
但是,所有这些库都使您可以使用Promise的实现(因为自从Promises成为ECMAScript标准的一部分之前,它们就已经存在了),而且它们中的大多数都具有很大的优势(蓝鸟时钟几乎达到166k,未缩小)。 promise-tools的...
使用Promises和async / await的简约 RPC 指数 安装 npm install awaited.io 用法-服务器 让我们做一个简单的服务器,它公开一个API来操作ES6 Map对象。 Map将通过共享上下文公开给我们的API函数,因此与我们的RPC...
使用Promises(对象,数组,字符串,数字,布尔值,函数)验证所有类型的数据。 安装 npm install verify - js -- save 在页面中包含缩小版本(verify.min.js)。 如何使用 一路输入 Object . isDefined ( input )...
承诺阅读 使用Promises从流中读取数据,并支持超时,取消以及确定读取多少数据的几种方法。入门实例var readTo = require ( 'promised-read' ) . readTo ;process . stderr . write ( 'What is your name? ' ) ;...
带有承诺和异步/等待的异步编程此存储库包含一些小练习,以使您更加习惯使用JavaScript处理异步代码的两种方式:Promises和新的Async / Await语法。 此回购包含四个主要章节:每章都包含练习和问题,它们将带您踏上...
使用本地Promises(如果可用) 降价产生 预览API(部署,团队,许可证等) 企业API 有关支持的方法的完整列表,请参阅 , ,,或目录。 总览 该库与文档非常相似。 例如: // `GET /repos/:owner/
gw2-api-wrapper gw2 apiJavaScript包装器,使用了promises。
make-promises-safe 一个让promises的使用免于内存泄漏的node.js模块
您是否一直想像老板一样将Express与Promises一起使用? 基本 通常,您必须执行以下操作: app . get ( '/api/songs' , ( req , res ) => { database . find ( 'songs' ) . then ( songs => res . json ( songs )...
在没有此模块的情况下使用Promises可能会导致文件描述符和内存泄漏。 重要的是,此模块仅用于顶层程序代码,而不用于可重用模块! 问题 如果有未捕获的异常,Node.js会崩溃,而如果存在'unhandledRejection' (即...
科尔多瓦媒体2 这个模块是对$cordovaMedia的$cordovaMedia类的重写,它利用 Promises 来解决媒体持续时间和位置的问题。 它通过使用 Deferred API 的notify方法来实现。用法只要为cordovaMedia2.js后文件ngCordova....
JavaScript with Promises
Which parts of promises are synchronous and which are asynchronous How to effectively use promise chains to simplify your code The best way to catch errors in promises How to create your own promises ...
天气应用 该项目正在构建一个天气应用程序,以使用天气API和Giphy API搜索世界上任何地方的温度,并方便地使用Promise或最好使用async / await函数。
这是“承诺的”,因为承诺几乎在任何地方都可以使用。 / signup路由创建一个组织和一个管理员用户。 然后,该管理员可以创建具有各种角色的其他用户来控制API访问。 其他特性: 自动生成的swagger-docs,包括将...
对我们为什么使用Promises,如何使用它们以及在Web Viewer API中标识Promises有了基本的了解。 为什么? JavaScript是异步的。 这对于Web而言功能强大,但是与C ++或Java相比却很复杂。 承诺可以提供帮助。
使用承诺。 const fsl = require ( 'fsl-async' ) ; 麦克迪尔 fsl . mkdir ( '/tmp/dir/does/not/exist/yet' ) . then ( ( ) => { console . log ( 'Done.' ) ; } ) ; 第二个参数设置一个模式,并遵循与相同的...
Thinking.in.Promises.2015.6.pdf英文电子版
在使用 Promises/A+ 实现时提供帮助的扩展。 需要承诺吗? 也许看看 。 安装 $ npm install [--save] promise-extensions 用法 require ( 'promise-extensions' ) . init ( Promise ) . install ( 'defer' ) ; //...