Simple understanding of ES6 Promise

Simple understanding of ES6 Promise

foreword

  1. Promises are a solution to asynchronous programming: syntactically, a promise is an object from which you can get messages for an asynchronous operation; in its original sense, it's a promise that promises to give you a result after a period of time
  2. Promise s can ensure that asynchronous requests become executed in order
  3. Concept: Promise is a new syntax in ES6, itself a constructor; each new Promise instance object represents an asynchronous operation
  4. Role: Solve the problem of callback hell (ie, the problem of asynchronous nested calls)
    Callback hell: refers to the code form of nested callback functions in the callback function; if the nesting level is very deep, it is callback hell;
    Callback Hell is not conducive to code reading, maintenance and later expansion

How to use promises

  1. Create a concrete asynchronous operation object

    const p = new Promise(function(successCb, errorCb){
     // Define specific asynchronous operations in this function
     // successCb success callback
     // errorCb failure callback
    })
  2. Promise is a constructor function that can new an object, which is itself an asynchronous operation
  3. Promise's then method
    When Promise is used, there are two method parameters successCb, errorCb respectively represents the success or failure of the execution
    The Promise object can call successCb and errorCb through the then method

    There are two specific situations as follows:

    result.then(function(data){/*success callback*/},function(data){/*failure callback*/})
    result.then(function(){/*success callback*/}).catch(function(data){/*failure callback*/})

    The former accepts the successCb and errorCb callback functions respectively through two parameters in the then method
    The latter accepts the successCb and errorCb callback functions in turn through the then and catch methods

  4. example:

    // Introduce fs module
    const fs = require('fs')
    
    // 4) Promise s intervene and enrich operations (join success, fail callback)
    function getFileCont(filename) {
      // Instantiate a Promise object to indicate an asynchronous operation
      // new Promise(function(successCb function, errorCb function){})
      // successCb: trigger the execution of resolve when the current asynchronous operation is ok
      // errorCb: The execution of reject is triggered when an error occurs (unexpectedly) in the current asynchronous operation
      return new Promise(function(successCb, errorCb) {
     // Embody asynchronous processes
     fs.readFile(filename, 'utf8', function(err, data) {
       if (err) {
         return errorCb('An error occurred while reading the file:' + err)
       }
       // Normal processing when all operations are ok, and give the processed result to the resolve call (return)
       successCb(data)
     })
      })
    }
    // The following guarantees that the results are obtained in order
    getFileCont('./files/1.txt').then(function(result) {
      console.log(result)
      return getFileCont('./files/2.txt')
    }).then(function(result){
      console.log(result)
      return getFileCont('./files/3.txt')
    }).then(function(result){
      console.log(result)
    }).catch(function(err){
      console.log(err)
    })

async and await in ES7

  1. async and await in ES7 can simplify Promise calls and improve the readability and comprehension of Promise code
  2. The combination of async and await can make asynchronous calls do not return Promise, but directly return the parameters of the then parameter method (also the actual parameters of the successCb function), making the code more frugal, improving the efficiency of code development, and ensuring the order of asynchronous calls. implement
  3. Various use cases of async and await:

    Notice:
    async and await must appear together
    An async can correspond to multiple await s
    The result of await modification must be a Promise object

    var obj = {
      async getInfo(){
     await getXXXX()
     await getXXXX()
      }
    }
    or
    function ffff(){
     // async needs to be set to the front of the nearest outer function of the Promise object
      getInfo(async function(){
          await getXXXX()
           //console.log(getXXXX())
      })
    }
    or
    async function XXXX(){
      await getXXXX()
    }

Summarize

  1. The new Promise() instantiates the object, and the parameter callback function will have two callback successCb and errorCb parameters
  2. These two callbacks can be received through then and catch(), but the asynchronous call code is somewhat reflected in the degree of hell callback
  3. The combination of async and await converts the returned Promise directly into the actual parameter of successCb, which greatly simplifies the complexity of code development and improves development efficiency.
  4. Catch async and await via try/catch if needed
  5. Usually used, async, await, exception three technologies combined to provide solutions for asynchronous sequential execution

    async function getThreeFile(){
      try{
     console.log(await getFileCont('./files/1.txt')) 
     console.log(await getFileCont('./files/2.txt')) 
     console.log(await getFileCont('./files/3.txt')) 
      }catch(err){
     console.log(err)
      }
    }
    getThreeFile()

Tags: Javascript Front-end

Posted by hack4lk on Wed, 18 May 2022 11:23:02 +0300