Introduction to ES6 promise, new features of ES7 and es8 async and await

ES6-Promise

Promise brief introduction

Promise yes ES6 Introduce a new solution to asynchronous programming . Grammatically Promise It's a constructor , Used to encapsulate asynchronous operations and obtain the results of their success or failure
adopt new Keywords can be instantiated into a Promise Object usage ：

• new Promise(excutor){}
  Parameters ：
  excutor Is a function like this function(resolve, reject){}
  • resolve: resolve The method can change Promise Instance object The status of is success
  • reject:reject: The method can change promise Instance object The status of is Failure

//  Instantiation Promise object 
const p = new Promise(function(resolve, reject){
    
    //  Encapsulating asynchronous operations 
})

Promise.prototype.then Method

usage ： p.then(function(value){}, function(){}}

• promise object then Method has two functions as formal parameters
• When promise Object state is success The first function is called when , The first function also has a formal parameter value
• value Is the value of the asynchronous call by resolve Method Returned data
• When promise Object state is Failure Call the second function , The second function also has a formal parameter reason
• reason The value of is an asynchronous call by reject Method Error returned

Successful asynchronous read :

//  call promise Object's then Method 
p.then(function(value){
    
    console.log(value); //  User data 
},function(reason){
    

})

Failed asynchronous reads :

//  Instantiation Promise object 
const p = new Promise(function(resolve, reject){
    
    //  Encapsulating asynchronous operations 
    setTimeout(function(){
    
        let err = " Read failed ";
        reject(err)
    })
})
//  call promise Object's then Method 
p.then(function(value){
    
    
},function(reason){
    
    console.error(reason); // Read failed 
})

then Method returns the result
then Method returns the result Also a Promise object , The state of the object is determined by the execution result of the callback function

• If the result returned in the callback function is non Promise Properties of type , Status is success , The return value is the successful value of the object

//  Instantiation Promise object 
const p = new Promise(function (resolve, reject) {
    
    //  Encapsulating asynchronous operations 
    setTimeout(function () {
    
       	let data = " User data "
        resolve(data)
    })
})
//  call promise Object's then Method 
const result = p.then(function (value) {
    
    console.log(value);
    // 1. Return non Promise Properties of type , Return successful Promise Type object 
    // return "iloveyou"
    // 2. return Promise object 
     return new Promise((resolve, reject)=>{
    
        // 2.1  success   Return successful Promise Type object 
        resolve(" success ！")
    // // 2.2  Failure   Return failed Promise Type object 
    // reject(" Failure ！")
     })
    // 3. Throw an error   Return failed Promise Type object 
    // throw new Error(" Error ")
}, function (reason) {
    

})

console.log(result);

Promise.prototype.catch Method

catch Method Can get Promise The status of type object is failed value

• This method is equivalent to then Method parameters do not write the contents of the first callback function
  usage ：
  p.catch(function(reason){})

//  Instantiation Promise object 
const p = new Promise(function (resolve, reject) {
    
    //  Encapsulating asynchronous operations 
    setTimeout(function () {
    
        //  Set up p The state of the object is failed , And set the failed value 
        let err = " Read failed ";
        reject(err)
    })
})

p.catch(function(reason){
    
    console.warn(reason);
})

ES7 New characteristics

Array.prototype.includes

includes Method is used to detect whether an array contains an element , Returns a Boolean value

const arr = [" The river "," Heart ape "," Wooden Dragon "," Dao gui "," Yima "];
console.log(arr.includes(" Heart ape "));// true
console.log(arr.includes(" Spider essence "));// false

Exponential operators

stay ES7 Index operator is introduced in **, Used to implement power operation , Function and Math.pow() The result is the same

console.log(5 ** 2);//25
console.log(2 ** 10);//1024

ES8 New characteristics -async and await

async and await

ES8 Proposed async and await Keyword the combination of two syntaxes can make asynchronous code look like synchronous code , Can solve promise object Continuous use then Method code is not concise

async function

• async function The return value of is Promise Type object
• Promise The result of the type object is determined by async function The return value of the execution determines
  • If the result returned is not a Promise Object of type , The result returned is the status success Of Promise object
  • If the result returned is Promise Object of type , The result returned Promise object The status is returned by the Promise The state of an object of type determines , If it works , The returned result status is also success , If it fails, the returned result status is also failed , The value of the returned result is also Promise The value of an object of type determines

async function fn() {
    
    // 1. Return non Promise Properties of type , Return successful Promise Type object 
    // return "iloveyou"

    // 2. Throw an error   Return failed Promise Type object 
    // throw new Error(" Error ")

    // 3. return Promise object 
    return new Promise((resolve, reject) => {
    
        // 3.1  success   Return successful Promise Type object 
        resolve(" success ！")
        // // 3.2  Failure   Return failed Promise Type object 
        // reject(" Failure ！")
    })
}

const result = fn();
console.log(result);

await expression

• await Keywords must be written in async Function
• await The expression on the right side of the keyword is generally promise object
• await The return is promise The value of success
• await The expression returns promise The value of success
• await Of expression promise Status failed , Will throw an exception , Need to pass through try...catch Capture processing

await When the expression state is successful

// await  Put it on async Function 
async function main() {
    
    let result = await new Promise((resolve, reject) => {
    
        resolve(" User data ");
    })
    //  Print await The expression returns the value 
    console.log(result);
}
//  Call function 
main()// User data 

await When the expression state fails , adopt try...catch Capture processing

// await  Put it on async Function 
async function main() {
    
    try {
    
        let result = await new Promise((resolve, reject) => {
    
            reject(" Read failed ")
        })
        //  Print await The expression returns the value 
        console.log(result);
    }
    catch (e) {
    
        console.warn(e);
    }
}
//  Call function 
main()

async and await Combined read file

File path

JS Code

//  introduce fs File module 
const fs = require("fs");

//  Read 《 Climbing crane and bird tower 》
function readPoetry(){
    
    return new Promise((resolve, reject)=>{
    
        fs.readFile("./resource/ Climb the stork tower .md", (err, data)=>{
    
            if(err){
    
                reject(err)
            }else{
    
                resolve(data)
            }
        })
    })
}
//  Read translation 
function readTranslation(){
    
    return new Promise((resolve, reject)=>{
    
        fs.readFile("./resource/ translation .md", (err, data)=>{
    
            if(err){
    
                reject(err)
            }else{
    
                resolve(data)
            }
        })
    })
}
//  Read authoring background 
function readBackground(){
    
    return new Promise((resolve, reject)=>{
    
        fs.readFile("./resource/ Background .md", (err, data)=>{
    
            if(err){
    
                reject(err)
            }else{
    
                resolve(data)
            }
        })
    })
}
//  Make a statement async function 
async function main(){
    
    // obtain 《 Climbing crane and bird tower 》 Content 
    let poetry = await readPoetry();
    //  obtain   The content of the translation is 
    let translation = await readTranslation();
    //  obtain   Creation background content 
    let background = await readBackground();
    console.log(poetry.toString());
    console.log(translation.toString());
    console.log(background.toString());
}
//  perform main function 
main()

Execution results

async and await Combined transmission AJAX request

Code

    <script>
        //  send out AJAX request , Return is Promise object 
        function sendAJAX(url) {
    
            return new Promise((reslove, reject) => {
    

                // 1. establish AJAX object 
                const xhr = new XMLHttpRequest();

                // 2. initialization 
                xhr.open("GET", url);

                // 3. send out 
                xhr.send();

                // 4. Event binding 
                xhr.onreadystatechange = function () {
    
                    if (xhr.readyState === 4) {
    
                        if (xhr.status >= 200 && xhr.status < 300) {
    
                            //  success 
                            reslove(xhr.response);
                        }else{
    
                            //  Failure 
                            reject(xhr.status)
                        }
                    }
                }
            })
        }
        //  test 
        async function main(){
    
            //  send out AJAX request 
            let data = await sendAJAX("https://api.apiopen.top/getJoke");
            console.log(data);
        }
        main()
    </script>

effect