当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Javascript中Promise的四种常用方法总结

Javascript中Promise的四种常用方法总结

2017年12月12日  | 移动技术网IT编程  | 我要评论

前言

promise是javascript异步操作解决方案，最近看到项目里不少人用了promise 的库类，比如 bluebird、q 、jquery.deffered 等 polyfill promise 方式，使用的时候翻看长长的文档，真心累觉不爱。

es5 发展到现在，node 在0.12版本就已经支持了promise， 在客户端，大部分浏览器也支持了promise， 如果要兼容低版本的浏览器，可以加上es5-shim等 polyfill promise。下面话不多说，来一起看看详细的介绍：

用法

promise 常用场景。

  • 处理异步回调
  • 多个异步函数同步处理
  • 异步依赖异步回调
  • 封装统一的入口办法或者错误处理

一、处理异步回调

promise 的基本用法， 处理异步回调。

function pro1(){
 return new promise(function(resolve, reject) {
  settimeout(function(){
   resolve('pro1')
  }, 300)
 })
}
//调用
pro1()
.then(function(data){
 console.log(data) //pro1
})
.catch(function(err){
 throw new error(err)
})

二、多个异步函数同步处理

有时候我们需要发送两个ajax，希望他们能一起把数据返回，就可以采用下面的办法。

function pro1(){
 return new promise(function(resolve, reject) {
  settimeout(function(){
   resolve('pro1')
  }, 300)
 })
}
function pro2(){
 return new promise(function(resolve, reject) {
  settimeout(function(){
   resolve('pro2')
  }, 300)
 })
}
//调用
var pro = promise.all([pro1(), pro2()]);
pro
.then(function(data){
 console.log(data[0], data[1]) //pro1 pro2
})
.catch(function(err){
 throw new error(err)
})

三、异步依赖异步回调

有些场景是一个异步依赖另一个异步的返回值的，就可以采用下面的用法。

比如： 用一个订单号异步取到订单详情，再用订单详情里的商品id获取到商品详情。

function pro1(orderid){
 return new promise(function(resolve, reject) {
  settimeout(function(){
   var orderinfo = {
    orderid: orderid,
    productids: ['123', '456']
   }
   resolve(orderinfo.productids)
  }, 300)
 })
}
function pro2(productids){
 return new promise(function(resolve, reject) {
  settimeout(function(){
   var products = productids.map(function(productid){
    return {
     productid: productid,
     name: '衣服'
    }
   })
   resolve(products)
  }, 300)
 })
}
//调用

pro1('abc123')
.then(function(productids){
 console.log('商品id',productids) 
 return pro2(productids)
})
.then(function(products){
 console.log('商品详情',products) 
})
.catch(function(err){
 throw new error(err)
})

四、封装统一的入口办法或者错误处理

错误处理

function errorhandler(promiseobj, rejectorresorcallback){
 return promiseobj.then(null, function(err){
 if(!err)
 })
}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网