promise是Javascript异步编程很好的解决方案。对于一个异步方法,执行一个回调函数。

比如页面调用google地图的api时就使用到了promise。

function success(position){
var cords = position.coords;
console.log(coords.latitude + coords.longitude);
} function error(err){
console.warn(err.code+err.message)
} navigator.geolocation.getCurrentPosition(success, error);

■ 如何处理多个异步方法

如果有很多异步方法需要按序执行呢?async1(success, failure), async2(success, failure), ...asyncN(success, failure),该如何处理呢?

最简单的,可能会这样写:

async1(function(){
async2(function(){
...
asyncN(null, null);
...
}, null)
}, null)

以上的代码是比较难维护的。

我们可以让所有的异步方法执行完毕后出来一个通知。

var counter = N;
function success(){
counter--;
if(counter === 0){
alert('done');
}
} async1(success);
async2(success);
...
asyncN(success);

■ 什么是Promise和Deferred

deferred表示异步操作的结果,提供了一个显示操作结果和状态的接口,并提供了一个可以获取该操作结果相关的promise实例。deferred是可以改变操作状态的。

promise提供了一个用来和相关deferred交互的接口。

当创建一个deferred,相当于一个pending状态;
当执行resolve方法,相当于一个resolved状态。
当执行reject方法,相当于一个rejected状态。

我们可以在创建deferred之后,定义回调函数,而回调函数在得到resolved和rejected的状态提示后开始执行。异步方法不需要知道回调函数如何操作,只需要在得到resolved或rejected状态后通知回调函数开始执行。

■ 基本用法

→ 创建deferred

var myFirstDeferred = $q.defer();

这里,对于myFirstDeferred这个deferred,状态是pending,接下来,当异步方法执行成功,状态变成resolved,当异步方法执行失败,状态变成rejected。

→ Resolve或Reject这个dererred

假设有这样的一个异步方法:async(success, failure)

async(function(value){
myFirstDeferred.resolve(value);
}, function(errorReason){
myFirstDeferred.reject(errorReason);
})

在AngularJS中,$q的resolve和reject不依赖上下文,大致可以这样写:

async(myFirstDeferred.resolve, myFirstDeferred.reject);

→ 使用deferred中的promise

var myFirstPromise = myFirstDeferred.promise;

myFirstPromise
.then(function(data){ }, function(error){ })

deferred可以有多个promise.

var anotherDeferred = $q.defer();

anotherDeferred.promise
.then(function(data){ },function(error){ }) //调用异步方法
async(anotherDeferred.resolve, anotherDeferred.reject); anotherDeferred.promise
.then(function(data){ }, function(error){ })

以上,如果异步方法async成功执行,两个success方法都会被调用。

→ 通常把异步方法包裹到一个函数中

function getData(){
var deferred = $q.defer();
async(deferred.resolve,deferred.reject);
return deferred.promise;
} //deferred的promise属性记录了达到resolved, reject状态所需要执行的success和error方法
var dataPromise = getData();
dataPromise
.then(function(data){
console.log('success');
}, function(error){
console.log('error');
})

如果只关注success回调函数该如何写呢?

dataPromise
.then(function(data){
console.log('success');
})

如果只关注error回调函数该如何写呢?

dataPromise
.then(null, function(error){
console.log('error');
}) 或 dataPromise.catch(function(error){
console.log('error');
})

如果不管回调成功或失败都返回相同的结果呢?

var finalCallback = function(){
console.log('不管回调成功或失败都返回这个结果');
} dataPromise.then(finalCallback, finalCallback); 或 dataPromise.finally(finalCallback);

■ 值链式

假设有一个异步方法,使用deferred.resolve返回一个值。

function async(value){
var deferred = $q.defer();
var result = value / 2;
deferred.resolve(result);
return deferred.promise;
}

既然返回的是promise,我们就可以不断then, then下去的。

var promise = async(8)
.then(function(x){
return x+1;
})
.then(function(x){
return x*2;
}) promise.then(function(x){
console.log(x);
})

以上,resolve出的值成为每一个链式的实参。

■ Promise链式

function async1(value){
var deferred = $q.defer();
var result = value * 2;
deferred.resolve(result);
return deferred.promise;
} function async2(value){
var deferred = $q.defer();
var result = value + 1;
deferred.resolve(result);
return deferred.promise;
} var promise = async1(10)
.then(function(x){
return async2(x);
}) promise.then(function(x){
console.log(x);
})

当然一种更易读的写法是:

function logValue(value){
console.log(value);
} async1(10)
.then(async2)
.then(logValue);

async1方法的返回值成为then方法中的success方法中的实参。

如果从捕获异常的角度,还可以这样写:

async1()
.then(async2)
.then(async3)
.catch(handleReject)
.finally(freeResources);

■ $q.reject(reason)

使用该方法能够让deferred呈现error状态,并给出一个出现error的理由。

var promise = async().then(function(value){
if(true){
return value;
} else {
return $q.reject('value is not satisfied');
}
})

■ $q.when(value)

返回一个promise并带上值。

function getDataFromBackend(query){
var data = searchInCache(query);
if(data){
return $q.when(data);
} else {
reutrn makeAasyncBackendCall(query);
}
}

■ $q.all(promisesArr)

等待所有promise执行完成。

var allPromise = $q.all([
async1(),
async2(),
...
asyncN();
]) allProise.then(function(values){
var value1 = values[0],
value2 = values[1],
...
valueN = values[N]; console.log('all done');
})

Javacript和AngularJS中的Promises的更多相关文章

  1. angularJS中的Promise对象($q)的深入理解

    原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...

  2. Angularjs中的promise

    promise 是一种用异步方式处理值的方法,promise是对象,代表了一个函数最终可能的返回值或抛出的异常.在与远程对象打交道非常有用,可以把它们看成一个远程对象的代理. 要在Angular中创建 ...

  3. AngularJS 中的 Promise 和 设计模式(转)

    原文地址:http://my.oschina.net/ilivebox/blog/293771 目录[-] Promise 简单例子 链式 Promise Parallel Promises And ...

  4. AngularJS 中的 Promise 和 设计模式

    解决 Javascript 异步事件的传统方式是回调函数:调用一个方法,然后给它一个函数引用,当这个方法完结的时候执行这个函数引用. <!-- lang: js --> $.get('ap ...

  5. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

  6. AngularJS 中的Promise --- $q服务详解

    先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...

  7. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  8. 关于angularjs中的jQuery

    关于angularjs中的jQuery 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...

  9. angularjs中的directive scope配置

    angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...

随机推荐

  1. MySQL数据库指定字符集

    mysql 创建数据库时指定编码很重要,很多开发者都使用了默认编码,但是我使用的经验来看,制定数据库的编码可以很大程度上避免倒入导出带来的乱码问题. 我们遵循的标准是,数据库,表,字段和页面或文本的编 ...

  2. Spring 4 官方文档学习(十二)View技术

    关键词:view technology.template.template engine.markup.内容较多,按需查用即可. 介绍 Thymeleaf Groovy Markup Template ...

  3. oracle 多级菜单查询 。start with connect by prior

    select * from S_dept where CODE in(select sd.code from s_dept sd start with sd.code='GDKB' connect b ...

  4. JS-字符串操作,查找显示高亮

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  5. Android 内存监测工具 DDMS --> Heap

    一.什么是内存泄露    内存泄露是指程序中间动态分配了内存,但是在程序结束时没有释放这部分内存,从而造成那一部分内存不可用.导致系统运行变慢或应用程序崩溃.二.如何检测Android中的内存泄露   ...

  6. web浏览器工作原理

    HTML在浏览器里的渲染原理 我们打开的页面(Web页面)在各种不同的浏览器中运行,浏览器载入.渲染页面的速度直接影响着用户体验,简单地说下页面渲染,页面渲染就是浏览器将html代码根据CSS定义的规 ...

  7. wamp链接mysql数据库

    一:链接到自带的数据库 1.打开mysql命令行 密码为空即回车2.输入use mysql 3.执行 update user set password=PASSWORD('123456') where ...

  8. 项目学习——电力系统底层架构ssh

    电力系统底层架构1.建立web工程 创建数据库 导入向对应的jar包2. 持久层: (1)在cn.itcast.elec.domain中创建持久化类ElecText @SuppressWarnings ...

  9. 安装Tomcat服务器

    一.首先,下载Tomcat,你可以直接百度Tomcat官网, 或者,直接在地址栏输入他的官网地址:http://tomcat.apache.org/,然后进入他的主页,在主页左侧可以找到Downloa ...

  10. java编程规范

    一.规范存在的意义 应用编码规范对于软件本身和软件开发人员而言尤为重要,有以下几个原因: 1.好的编码规范可以尽可能的减少一个软件的维护成本 , 并且几乎没有任何一个软件,在其整个生命周期中,均由最初 ...