Four common methods of promise.

Time:2021-6-13

preface

I saw that many people used it in the projectPromiseSuch as Bluebird, Q, jQuery. Deffered, etcpolyfill promise Way, when using the long document, really tired feel do not love.
With the development of Es5, node0.12Version is already supportedpromiseOn the client side, most browsers also support itPromiseIf you want to be compatible with lower version browsers, you can addes5-shimetc.polyfill promise

usage

Promise is commonly used in three scenarios.

  • Handling asynchronous callbacks

  • Synchronous processing of multiple asynchronous functions

  • Asynchronous dependency asynchronous callback

  • Encapsulation of uniform entry methods or error handling

Handling asynchronous callbacks

PromiseTo handle asynchronous callbacks.

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

Synchronous processing of multiple asynchronous functions

Sometimes we need to send twoajaxIn the hope that they can return the data together, we can adopt the following method.

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

Asynchronous dependency asynchronous callback

In some scenarios, one asynchronously depends on the return value of another asynchronously, you can use the following usage.
For example, use an order number to get the order details asynchronously, and then use the goods in the order detailsIdGet the product details.

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: 'clothes'
                }
            })
            resolve(products)
        }, 300)
    })
}
//Call

Pro1('abc123')
.then(function(productIds){
    Console.log ('commodity ID ', productids) 
    return Pro2(productIds)
})
.then(function(products){
    Console.log ('product details', products) 
})
.catch(function(err){
    throw new Error(err)
})

Encapsulation of uniform entry methods or error handling

error handling

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