Overview of Promise and introduction to common methods

Promise Overview

The Promise object is a specification proposed by the CommonJS working group to provide a unified interface for asynchronous operations.

So, what are Promises?

First of all, it is an object, which means that it is no different from other JavaScript objects; secondly, it acts as a proxy (proxy), acting as an asynchronous operation and Intermediary between callback functions. It enables asynchronous operations to have an interface for synchronous operations, so that the program has a normal synchronous running process, and callback functions no longer need to be nested layer by layer.

Simply put, the idea is that each asynchronous task returns a Promise object immediately. Since it returns immediately, the synchronous operation process can be used. This Promises object has a then method that allows you to specify a callback function to be called after the asynchronous task is completed.

For example, asynchronous operation f1 returns a Promise object, and its callback function f2 is written as follows.

(new Promise(f1)).then(f2);

Preface

Promise is JavaScript As an asynchronous operation solution, I have recently seen many people in the project using Promise library classes, such as bluebird, q, jQuery.Deffered and other polyfill promise methods. When using it, I read the long document. I sincerely appreciate it. Tired of sleeping and not loving.

es5 has developed to the present, node has supported promises in version 0.12. On the client side, most browsers also support Promise. If you want to be compatible with lower version browsers, you can add es5 -shim and other polyfill promises. Not much to say below, let’s take a look at the detailed introduction:

Usage

Common Promise scenarios.

• Handling asynchronous callbacks

• Synchronous processing of multiple asynchronous functions

• Asynchronous dependencies on asynchronous callbacks

• Encapsulate a unified entry method or Error handling
  

1. Handling asynchronous Callback

Basic usage of Promise, handling asynchronous callbacks.

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

2. Synchronous processing of multiple asynchronous functions

Sometimes we need to send two ajaxes, hoping that they can be processed together When data is returned, the following method can be used.

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

3. Asynchronous dependency Asynchronous callback

Some scenarios require one asynchronous dependency on another An asynchronous return value can be used as follows.

For example: Use an order number to asynchronously obtain order details, and then use the product ID in the order details to obtain 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: '衣服'
    }
   })
   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)
})

4. Encapsulate unified entry method or error handling

Error handling

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

The above is the detailed content of Overview of Promise and introduction to common methods. For more information, please follow other related articles on the PHP Chinese website!