JS in async / await the usage and understanding

1, we first need to understand the basic meaning of async and await

async modifier is a function defined async default return value of resolve a target Promise, therefore async function can then operate directly, then the value returned is the method of passing function

// of 0. The use of the async base test 

the async function Fun0 () { 
    the console.log ( . 1 )
     return . 1 
} 

Fun0 (). The then (X => {the console.log (X)})   //   output. 1,. 1, 


the async function Funa () { 
    the console.log ( 'A' )
     return 'A' 
} 

Funa (). the then (X => {the console.log (X)})   //   output A, A, 


the async function Funo () { 
    the console.log ({}) 
    return {} 
} 

Funo (). the then (X => {the console.log (X)})    // 输出结果 {}  {}

async function funp() {
    console.log('Promise')
    return new Promise(function(resolve, reject){
        resolve('Promise')
    })
}

funp().then( x => { console.log(x) })   // 输出promise  promise

await also a modifier,

await async keyword can only be placed inside a function, the role of await key is to get the content returned Promise, Promise is a function of the acquired value of resolve or reject
// if not behind a Promise await the return value will synchronization procedure in accordance with the return value

//   await async keyword can only be placed inside a function, the role of await key is to get the content returned Promise, Promise is a function of the acquired value of resolve or reject 
// if not a Promise await the return value back, The return value will be processed in accordance with the synchronization procedure is undefined 
const BBB = function () { return 'String' } 

the async function funAsy () { 
   const A = the await. 1 
   const B = the await new new Promise ((Resolve, Reject) => { 
        the setTimeout ( function () { 
           Resolve ( 'Time' ) 
        }, 3000 ) 
   }) 
   const C = the await BBB ()
   the console.log (A, B, C) 
}

funAsy ()   //   operation result after 3 seconds, output 1, time, string,

// 2. If not, then use the promise 

function Iog2 (Time) { 
   the setTimeout ( function () { 
       the console.log (Time) 
       return . 1 
    }, Time) 
} 

the async function fun1 () { 
    const A = the await Iog2 (5000 ) 
    B const = the await Iog2 (10000 ) 
    const C = Iog2 (2000 ) 
    the console.log (A) 
    the console.log ( . 1 ) 
} 

fun1 () 

// above operation results: immediate undefined output immediately after 12 seconds output 2000 after the second output of second outputs 500,010 10,000

2, it is apparent comprehensive usage async / await follows

// 1. Define one or more general function, the function must return Promise objects, if other types of data returned, the process according to the conventional synchronization program 

function log (Time) {
     return  new new Promise ((Resolve, Reject) => { 
        the setTimeout ( function () { 
           the console.log (Time) 
           Resolve () 
        }, Time) 
    }) 
} 

the async function Fun () { 
    the await log ( 5000 ) 
    the await log ( 10000 ) 
    log ( 1000 ) 
    the console.log ( . 1 ) 
} 

Fun ( )

// 3. async / await的重要应用 

const asy = function(x, time) {
    return new Promise((resolve, reject) =>{
        setTimeout(()=>{
            resolve(x)
        }, time)
    })
}

const add = async function() {
    const a = await asy(3, 5000)
    console.log(a)
    const b = await asy(4, 10000)
    console.log(b)
    const c =  await asy(5, 15000)
    console.log(a,b,c)
    const d = a + b +C   
    the console.log (D) 
} 

the Add (); 

// after 5 seconds and 10 seconds the output 3 and output 4 output 5 and 15 seconds immediately 3,4,5 output, then the output 12

JS in async / await the usage and understanding

Guess you like