详解Javacript和AngularJS中的Promises

 更新时间:2016年02月09日 10:13:28   作者:Darren Ji  
这篇文章主要介绍了详解Javacript和AngularJS中的Promises的相关资料,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');
})

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

相关文章

  • JavaScript保护密钥的方法详解

    JavaScript保护密钥的方法详解

    在前端js编程中,如果涉及到加密通信、加密算法,经常会用到密钥,但密钥,很容易暴露, 暴露原因:js代码透明,在浏览器中可以查看源码,从中找到密钥,所以本文给大家介绍了前端js中如何保护密钥,需要的朋友可以参考下
    2024-10-10
  • 使用webpack编译es6代码的方法步骤

    使用webpack编译es6代码的方法步骤

    这篇文章主要介绍了使用webpack编译es6代码的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • JS实现选中当前菜单后高亮显示的导航条效果

    JS实现选中当前菜单后高亮显示的导航条效果

    这篇文章主要介绍了JS实现选中当前菜单后高亮显示的导航条效果,涉及JavaScript针对页面元素的遍历及样式动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 微信小程序实现顶部搜索框

    微信小程序实现顶部搜索框

    这篇文章主要为大家详细介绍了微信小程序实现顶部搜索框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • javascript模拟post提交隐藏地址栏的参数

    javascript模拟post提交隐藏地址栏的参数

    想要隐藏地址栏的参数,就只能用javascript模拟post提交,下面是示例代码,需要的朋友可以看看
    2014-09-09
  • 详解如何在微信小程序开发中正确的使用vant ui组件

    详解如何在微信小程序开发中正确的使用vant ui组件

    这篇文章主要介绍了详解如何在微信小程序开发中正确的使用vant ui组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • js实现坦克大战游戏

    js实现坦克大战游戏

    这篇文章主要为大家详细介绍了js实现坦克大战游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 微信小程序实现获取准确的腾讯定位地址功能示例

    微信小程序实现获取准确的腾讯定位地址功能示例

    这篇文章主要介绍了微信小程序实现获取准确的腾讯定位地址功能,结合实例形式详细分析了微信小程序使用腾讯地理位置接口的相关注册、操作步骤及接口使用技巧,需要的朋友可以参考下
    2019-03-03
  • js利用div背景,做一个竖线的效果。

    js利用div背景,做一个竖线的效果。

    尝试了好多种css属性,总是无法达成目标。主要就是height这个属性,100%,对于ff似乎并不起什么作用,既然我将其父容器的高度也设置为100%,依然没有效果。这样的话,就无法显示出平铺的背景,想法也得不到实现。
    2008-11-11
  • DIV菜单层实现代码

    DIV菜单层实现代码

    昨天我问一美工jQuery怎么样了,他说简单的还可以,复杂的就不行了,我又问是哪种程度的复杂?
    2010-11-11

最新评论