Javascript中怎使用Promise?使用Primise的常用方法总结!

猿友 2021-07-13 14:31:22 浏览数 (3130)
反馈

有学习过前端语言的小伙伴们都知道 JavaScript,它可以为我们网页的实现提供了不少的帮助,那么对于 JavaScript 这个语言,小编今天来说说在“Javascript怎使用Promise?”这个问题。下面是小编整理的相关内容和资料,希望对大家的学习和了解有所帮助!


方法一:处理异步回调

对于 ​JavaScript​ 中的 ​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)
})

方法三:异步依赖异步回调

在这个方法中我们使用这个方法可以借鉴下面这串代码进行参考,代码如下所示:

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)
 })
}

总结:

对于 JavaScript 中的 Primise 常用的场景就是这些了,更多有关于 JavaScript 相关的内容我们都可以在 W3Cschool 中进行学习和了解。当然如果你有其他更好的想法也可以和大家一同分享你的想法。希望以上的分享对大家有所帮助。


0 人点赞