Detailed explanation of ES6 and ES7 asynchronous processing (code example)

This article brings you a detailed explanation (code example) of ES6 and ES7 asynchronous processing. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Master ES6/ES7 asynchronous processing at once

Assume a scenario, wait for your girlfriend to fall asleep and go shopping. If it takes more than 5 seconds, don’t wait and play games by yourself...

ES6 Promise processing method

Promise writing method
Promise chain calling method, only when the asynchronous processing is successful, return to use .then(data => {}) to get the data after the asynchronous processing is successful
When an error occurs in asynchronous processing, .then(err => {}) will be called to get an exception.
In other words, there are two methods in the .then( data => {}, err => {}) method. A callback function as a parameter
Or there is a second way of writing.then(data => {}).catch(err => {})

function waiting (ms) {
    return new Promise ( (resolve, reject) => {
        if(ms > 5000) {
            reject('long time')
        } else {
            setTimeout(() => {
                resolve(ms);
            }, ms)
        }
    })
}


function main () {
    waiting(3000).then( success => {
        console.log(success);
    }, err => {
        console.log(err)
    })
}

// 或者
function main() {
    waiting(3000).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err);
    })
}

ES7 Async/Await processing method

async indicates that there is an asynchronous operation in this function, and await is always written in the function declared by async.
When encountering awit, the function will stop execution, wait for the asynchronous operation to end, and then execute the following statements
The result obtained by the asynchronous operation is the parameter return of the resolve callback function.
Exception is obtained through the reject callback function parameter.
Note that when catching an exception, we often need to use try catch method in the async function body to obtain the exception.

let sleep = ms => {
    return new Promise ( (resolve, reject) => {
        if(ms > 5000) {
            reject('long time')
        } else {
            setTimeout(function() {
                resolve(ms)
            } ,ms)
        }
    })
}

let play = (ms) => {
    console.log(`I wait you ${ms} s`)
}

let main = async () => {
    try{
        let result = await sleep(3000);
        play(result)
    } catch (err) {
        throw err
    }
}

Note: What is await waiting for? It is promise, which returns the data in the resolve callback function

The above is the detailed content of Detailed explanation of ES6 and ES7 asynchronous processing (code example). For more information, please follow other related articles on the PHP Chinese website!