理解async 和 await

await 后面接的是promise,await语句下面(注意:不是await后面,而是await所在语句的下面,即下行以后)的代码就相当在promise.then()里面执行,
有文章说 await后面是返回的一个promise的resolve/reject的结果,我未证实,如果是这样,那await简直太好用了,还可以返回reject的值
await 通过变通“=”的含义,将左值等于右边Promise对象中resolve的值,以此方法巧妙的将以前只能层层嵌套写进里面等待的异步操作,变成了常规的按顺序执行的语句,真是太聪明了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
复制代码

 

posted @ 2024-03-11 22:48  网风笔记开发者  阅读(208)  评论(0编辑  收藏  举报