详解Javacript和AngularJS中的Promises


Posted in Javascript onFebruary 09, 2016

比如页面调用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');
})

以上就是本文的详细内容,希望对大家学习有所帮助,新年快乐!

Javascript 相关文章推荐
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
用vue写一个日历
Nov 02 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
深入浅析JavaScript面向对象和原型函数
Feb 06 #Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 #Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 #Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 #Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 #Javascript
简介AngularJS中$http服务的用法
Feb 06 #Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 #Javascript
You might like
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
js创建对象的方式总结
2015/01/10 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
js实现随机数小游戏
2019/06/28 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
Python标准库内置函数complex介绍
2014/11/25 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
pyspark 随机森林的实现
2020/04/24 Python
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
大学生励志演讲稿
2014/04/25 职场文书
个性与发展自我评价
2015/03/06 职场文书
python缺失值的解决方法总结
2021/06/09 Python
Nginx安装配置详解
2022/06/25 Servers
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技