App下載

Javascript中怎使用Promise?使用Primise的常用方法總結(jié)!

猿友 2021-07-13 14:31:22 瀏覽數(shù) (3317)
反饋

有學(xué)習(xí)過前端語言的小伙伴們都知道 JavaScript,它可以為我們網(wǎng)頁的實(shí)現(xiàn)提供了不少的幫助,那么對于 JavaScript 這個(gè)語言,小編今天來說說在“Javascript怎使用Promise?”這個(gè)問題。下面是小編整理的相關(guān)內(nèi)容和資料,希望對大家的學(xué)習(xí)和了解有所幫助!


方法一:處理異步回調(diào)

對于 ?JavaScript? 中的 ?Promise? 的基本用法是處理異步回調(diào),我們來看看下面的代碼:

function Pro1(){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   resolve('pro1')
  }, 300)
 })
}
//調(diào)用
Pro1()
.then(function(data){
 console.log(data) //pro1
})
.catch(function(err){
 throw new Error(err)
})

方法二:多個(gè)異步函數(shù)同步處理

那么在開發(fā)中有時(shí)候我們需要發(fā)送兩個(gè) ?Ajax? ,我們希望他們可以能夠?qū)?shù)據(jù)返回,我們可以采用下面這個(gè)方法代碼如下所示:

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)
 })
}
//調(diào)用
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)
})

方法三:異步依賴異步回調(diào)

在這個(gè)方法中我們使用這個(gè)方法可以借鑒下面這串代碼進(jìn)行參考,代碼如下所示:

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)
 })
}
//調(diào)用
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)
})

方法四:封裝統(tǒng)一入口辦法或者錯(cuò)誤處理

錯(cuò)誤處理代碼如下所示:

function ErrorHandler(promiseObj, rejectOrResOrCallback){
 return promiseObj.then(null, function(err){
 if(!err)
 })
}

總結(jié):

對于 JavaScript 中的 Primise 常用的場景就是這些了,更多有關(guān)于 JavaScript 相關(guān)的內(nèi)容我們都可以在 W3Cschool 中進(jìn)行學(xué)習(xí)和了解。當(dāng)然如果你有其他更好的想法也可以和大家一同分享你的想法。希望以上的分享對大家有所幫助。


0 人點(diǎn)贊