ES6-Promise

Time:2021-4-8

1、 Introduction
Promise is an asynchronous programming solution introduced by ES6. In short, it is a container that holds the result of an event (usually an asynchronous operation) that will end in the future. Syntactically, promise is a constructor from which messages of asynchronous operations can be obtained.
Advantages of using promise: it supports chain call and can solve the problem of callback hell. Before ES6, callback function was usually used to implement asynchronous operation, which brought inconvenience to reading and error handling.

Promise has two characteristics
1. The state of the object is not affected by the outside world. The promise object represents an asynchronous operation and has three states:

Pending - in progress
Fully - successful
Rejected - failed

Only the result of asynchronous operation can determine the current state. No other operation can change this state.
2. Once the state changes, it won’t change again. You can get this result at any time.
There are only two states that change,

pending-->fulfilled
pending-->rejected

As long as these two situations happen, the state will solidify and will not change again. The result will be kept all the time. This is called settled. If the change has happened, add a callback function to the promise object, and you will get the result immediately. This is different from event. The characteristic of event is that if you miss it, you can’t get results if you listen again.

2、 Basic usage
The promise constructor takes a function as a parameter, and the two parameters of the function are resolve and reject. They are two functions, provided by JS engine, and need not be deployed by themselves.
The resolve function is called when the asynchronous operation is successful and passes the result of the asynchronous operation as a parameter. At the same time, the state of promise is changed from pending to full.
The reject function is called when the asynchronous operation fails, passing the error reported by the asynchronous operation as a parameter. At the same time, change the project state from pending to rejected.

const promise = new Promise((resolve,reject)=>{
    If (/ * asynchronous operation succeeded * /){
        resolve(value)
    } else {
        reject(error)
    }
})

After the project instance is generated, you can use the then method and the two parameters of then () to specify the callback functions of resolved and rejected states respectively. Both parameters are optional, and they both accept the value from the promise object as a parameter.

promise.then((value)=>{
    /*success*/
},(error)=>{
    /*failure*/
})

example:

const timeout = (ms)=>{
    return new Promise((resolve,reject)=>{
        The third parameter of setTimeout (resolve, MS, 'done') / * settimeout() is the other parameter passed to the executing function. Therefore, after Ms seconds, pass' done 'as a parameter into the resolve function and execute it*/
    })
}

Timeout (1000). Then ((value) = > {// the timeout function returns a promise instance, which indicates the result that will occur after a period of time. After the specified time MS, the status of the promise instance changes from pending to resolved, and the callback function bound to the then method will be triggered
    console.log(value)  //'done'
})

The execution order of promise is as follows:
After the promise is created, it will be executed immediately. The callback function specified by then () will be executed only after all synchronization tasks of the current script are completed.

let promise = new Promise((resolve,reject)=>{
    console.log('promise');
    resolve()
})

promise.then(()=>{
    console.log('resolved')
})
console.log('Hi')  
//'promise'
//'Hi'
//'resolved'

Encapsulating an asynchronous interaction with promise

function myAsyncFun(url){
    return new Promise((resolve,reject)=>{
        cosnt xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onload = ()=> resolve(xhr.responseText);
        xhr.onerror = ()=> reject(xhr.statusText);
        xhr.send();
    })
}

3 Promise.all () processing concurrent requests
When a page needs multiple asynchronous requests to be processed at the same time, you can use the Promise.all () method to wrap multiple promises into a new promise instance
This method takes an array as a parameter, and the array element is a single promise instance. The array of parameters of the promise () method encapsulates the results.

Promise.all([
    new Promise((resolve,reject)=>{
        SetTimeout (resolve, 1000, 'this is the result of the first promise')
    }),
    new Promise((resolve,reject)=>{
        SetTimeout (resolve, 1000, 'this is the result of the second promise')
    })
]).then(res=>{
    console.log(res[0])
    console.log(res[1])
})

Recommended Today

Third party calls wechat payment interface

Step one: preparation 1. Wechat payment interface can only be called if the developer qualification has been authenticated on wechat open platform, so the first thing is to authenticate. It’s very simple, but wechat will charge 300 yuan for audit 2. Set payment directory Login wechat payment merchant platform( pay.weixin.qq . com) — > Product […]