define

Async is used to declare that a function is asynchronous and await is used to wait for an asynchronous method to complete.

  • Async /await is the syntactic sugar of generator
  • Async /await solves the promise code redundancy problem

async

Async declares that function is an asynchronous function that returns a Promise object, and callbacks can be added using the then method. The value returned by the return statement inside the async function becomes an argument to the then method callback function.

Basic usage
  • The async function returns a Promise object, and callbacks can be added using the then method
Async function test(){return a promise object. If async function does not return a promise object, Async returns a undefined promise object test().then(res=>{console.log(res); / / zhang SAN})Copy the code
  • When a function executes, it returns as soon as it encounters await, waits until the asynchronous operation is complete, and then executes the following statement in the function body

await

Async, await execution order

“Await” will produce a task (promise.then) when the function after “await” is finished. After “await” is performed, the async function will be jumped out and other code will be executed.

console.log('script start') async function async1() { await async2() console.log('async1 end') } async function async2()  { console.log('async2 end') } async1() setTimeout(function() { console.log('setTimeout') }, 0) new Promise(resolve =>{ console.log('Promise') resolve() }) .then(function(){ console.log('Promise1') }) // script start => async2 end => Promise => promise1 =>async1 end => setTimeoutCopy the code
console.log('script start') async function async1() { await async2() console.log('async1 end') } async function async2()  { console.log('async2 end') return Promise.resolve().then(()=>{ console.log('async2 end1') }) } async1() setTimeout(function() { console.log('setTimeout') }, 0) new Promise(resolve =>{ console.log('Promise') resolve() }) .then(function(){ console.log('Promise1') }) // script start => async2 end => Promise =>async2 end1 => promise1 => async1 end => setTimeoutCopy the code

Additional extension (Generator function)

define

A traverser of the internal state of a function that changes each time it is called.

Characteristics of the
  • There is an * between the function keyword and the function name
  • The function body uses the yield statement
function* test(){ yield 'hello'; yield 'world' } var ts = test(); // The first call to this method does not execute, only returns a traverser ts.next()Copy the code

Runtime process parsing:

  • When a generator function is called, it does not execute, but returns a traverser.
  • Start execution by calling next(), stop execution when yield is encountered, and return an object whose value attribute is the value of the current yield statement and done attribute is false.
  • Next () is looped until the return statement (or the end of the function if there is no return statement).
The next () parameters

The value attribute of the object returned by the next method is the value of the expression following the return statement (undefined if there is no return statement), and the value of the done attribute is true, indicating the end of the traversal.

for… Of traverses generator functions
function * foo(){ yield 1; yield 2; yield 3; yield 4; return 5; } the for (let v of f00 ()) {the console. The log (v)} / / 1, 2, 3, 4Copy the code

Once the next method returns an object with the done attribute true, for… The of loop terminates and does not contain the return object.