preface

This paper briefly introduces three kinds of asynchronous processing methods and arranges the underlying principle of async await. If you have different views on the answer, you are welcome to add and discuss in the comment section. Of course, you are also welcome to point out any questions in the comment section.

Learning is that simple. Do you understand me?

1. How to handle asynchrony

(1) Callback function

Concept: A function that is passed as an argument to another function and is called (in sequence) from within that function to accomplish some task is called a callback function.

Cons: Prone to callback hell

(2) the Promise

Promise is a solution to asynchronous programming:

• A Promise is an object that allows you to associate the eventual success return value or failure cause of an asynchronous operation with the appropriate handler. This allows asynchronous methods to return values as synchronous methods do: instead of returning the final value immediately, asynchronous methods return a promise to give the value to the consumer at some point in the future.

• Promise has three states: pending, fulfiled, and Rejected. Once the state has changed, it will never change. Once a Promise instance is created, it executes immediately, returning success or failure via.then() or.catch().

(3) async, await

Async functions are syntactic sugar for Generator functions. Async await = Generator+ automatic executor

The async and await keywords allow us to write asynchronous behavior based on promises in a more concise way, without having to deliberately chain call promises.

2, async await

(1) Basic use of async await

// The promise implementation makes asynchronous promises to handle asynchrony
function request(value,delay){
    return new Promise((resolve,reject) = >{
        setTimeout(() = >{
            resolve(value)
        },delay)
    })
}

// serialize execution
async function run(){
    const test1 = await request('test1'.2000);
    console.log(test1)
    const test2 = await request('test2'.1000);
    console.log(test2)
    const test3 = await 'test3';
    console.log(test3)
}
run()
// execute test1 after 2s
Run test2 and test3 after 3s
Copy the code

(2) Implementation of underlying principle of async await

// Generator
function* fun() {
    yield request('test1'.2000);
    yield request('test2'.1000);
    yield 'test3'
}

// 1. Normal execution
let gen = fun();
Promise.resolve(gen.next().value).then(res= >{
    console.log(res)
    Promise.resolve(gen.next().value).then(res= >{
        console.log(res)
        Promise.resolve(gen.next().value).then(res= >{
            console.log(res)
        })
    })
})
// execute test1 after 2s
Run test2 and test3 after 3s


asyncJust syntax sugar for generator.asyncIs equal to Generator+ automatic actuator// 2... Automatic executor - recursive implementation
function run(gen){
    let res = gen.next();
    // console.log(res) //{ value: Promise { <pending> }, done: false }
    if(res.done) return;
    Promise.resolve(res.value).then(data= >{
        console.log(data)
        run(gen)
    })
}
run(fun())
Copy the code

conclusion

Feel good writing, helpful to you, you can share with people around you, the more you share knowledge, do not be stingy

Follow-up updates promise to deal with the use of asynchronous methods and the implementation of underlying principles, please pay attention to me, tidy up, share with you, we learn the front end together.