Usage and understanding of async/await in JS

1、 First of all, we need to understand async and await The basic meaning of

   async It's a modifier ,async The defined function will return a by default Promise object resolve Value , So right. async Functions can be used directly then operation , The value returned is then Method

// 0. async Basic usage test 

async function fun0() {
    console.log(1)
    return 1
}

fun0().then( x => { console.log(x) })  //   Output results  1, 1,


async function funa() {
    console.log('a')
    return 'a'
}

funa().then( x => { console.log(x) })  //   Output results a, a,


async function funo() {
    console.log({})
    return {}
}

funo().then( x => { console.log(x) })   //  Output results  {}  {}

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

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

await It's also a modifier ,

await keyword Only on the async Internal function , await The role of keywords Is to get Promise Content returned in , What you get is Promise Function resolve perhaps reject Value
// If await It's not a Promise The return value of , It will be processed according to the returned value of the synchronization program

//  await  keyword   Only on the  async  Internal function , await The role of keywords   Is to get  Promise Content returned in ,  What you get is Promise Function resolve perhaps reject Value 
//  If await  It's not a Promise The return value of , It will be processed according to the returned value of the synchronization program , by undefined
const bbb = function(){ return 'string'}

async function funAsy() {
   const a = await 1
   const b = await new Promise((resolve, reject)=>{
        setTimeout(function(){
           resolve('time')
        }, 3000)
   })
   const c = await bbb()
   console.log(a, b, c)
}

funAsy()  //   The result of the operation is  3 Seconds later  , Output  1, time , string,

// 2. If not used promise The way to do it 

function log2(time) {
   setTimeout(function(){
       console.log(time)
       return 1
    }, time)
}

async function fun1() {
    const a = await log2(5000)
    const b = await log2(10000)
    const c = log2(2000)
    console.log(a)
    console.log(1)
}

fun1()

//  The above operation result is ：  Output immediately undefined    Output immediately 1  2 Second output 2000  5 Second output 5000  10 Second output 10000

2、 So from this point of view async / await The comprehensive usage of is as follows

// 1. Define one or more common functions , The function must return Promise object , If you return other types of data , It will be handled according to the normal synchronization procedure 

function log(time) {
    return new Promise((resolve, reject)=> {
        setTimeout(function(){
           console.log(time)
           resolve()
        }, time)
    })
}

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

fun()

// 3. async / await An important application of  

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  
    console.log(d)
}

add();

// 5 Second output 3   also 10 Second output 4  also 15 Second output 5   Then output immediately 3,4,5, Then the output 12