JS中的async/await的用法和理解

Posted 2022-08-26 liquanjiang

1、首先需要理解async 和 await的基本含义

   async 是一个修饰符，async 定义的函数会默认的返回一个Promise对象resolve的值，因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数

// 0. async基础用法测试

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


fun0().then( x =>  console.log(x) )  //  输出结果 1， 1，


async function funa() 
    console.log(‘a‘)
    return ‘a‘


funa().then( x =>  console.log(x) )  //  输出结果a， a，


async function funo() 
    console.log()
    return 


funo().then( x =>  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 也是一个修饰符，

await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
// 如果await 后面并不是一个Promise的返回值，则会按照同步程序返回值处理

//  await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
// 如果await 后面并不是一个Promise的返回值，则会按照同步程序返回值处理,为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()  //  运行结果是 3秒钟之后 ，输出 1， time , string,

// 2.如果不使用promise的方法的话

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()

// 以上运行结果为： 立刻输出undefined   立刻输出1  2秒后输出2000  5秒后输出5000  10秒后输出10000

2、那么由此看来async / await的综合用法如下

// 1.定义一个或多个普通函数，函数必须返回Promise对象，如果返回其他类型的数据，将按照普通同步程序处理

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的重要应用 

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秒后输出3  又10秒后输出4 又15秒后输出5  然后立刻输出3,4,5，然后输出12