zoukankan      html  css  js  c++  java
  • 5.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章。

     

     

     

     

     

  • 相关阅读:
    linux 定时备份数据库
    Web前端优化>javascript优化
    IT项目开发的75条管理守则
    Web前端优化>css 优化
    Web前端优化>图象篇
    SNS关键点
    项目管理(对事不对人)
    Yahoo!网站性能最佳体验的34条黄金守则——内容
    互联网主题知名博客
    Web前端优化>Cookie 优化
  • 原文地址:https://www.cnblogs.com/msdynax/p/3784003.html
Copyright © 2011-2022 走看看