Javascript中如何使用Promise

本文小編為大家詳細介紹“Javascript中如何使用Promise”，內容詳細，步驟清晰，細節處理妥當，希望這篇“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中如何使用Promise”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。