Promise 的四種經常使用方法。

前言

看到項目裏很多人用了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)
    })
}