async + await 优雅处理异步

不念不忘少年蓝@ 2023-07-18 14:21 12阅读 0赞

开发的时候偶尔遇到回调地狱的问题

function ajax(fn) { 
        setTimeout(() => { 
            console.log('你好')
            fn()
        }, 1000)
    }
    
    ajax(() => { 
        console.log('执行结束')
        ajax(() => { 
            ajax(() => { 
                ajax(() => { 
                    //.....
                })
            })
            console.log('hhhhhhh')
        })
    })

没完没了的回调，会导致阅读困难，并且捕获异常也是非常麻烦的。这个时候就出现了使用 Promise

function delay (word) { 
        return new Promise((reslove, reject) => { 
            setTimeout(() => { 
                reslove(word)
            }, 2000)
        })
    }
    
    delay('hhhhhh').then((res) => { 
        console.log(res)
        return delay('aaaaaa')
    }).then((res) => { 
        console.log(res)
        return delay('jjjjj')
    }).then((res) => { 
        console.log(res)
    })

Promise 可以理解成承诺的意思， （我承诺，当我成功的时候，执行 reslove 函数, 当我失败的时候，我执行 reject 函数）  
如果可以用同步的写法，来解决异步的问题，会让人看着更加舒服

function delay (word) { 
        return new Promise((reslove, reject) => { 
            setTimeout(() => { 
                reslove(word)
            }, 2000)
        })
    }
    
    async function start () { 
        const res1 = await delay('hhhh')
        console.log(res1)
        const res2 = await delay('aaaaa')
        console.log(res2)
        const res3 = await delay('jjjj')
        console.log(res3)
    }
    
    start()

使用 await 则函数要使用 async 来声明。async 声明的函数里面，没有 await  
（等我执行完 delay 这个函数，再往下执行）

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关【异步编程】async、await

什么是async和await async 用于声明一个异步函数，await 用于等待一个异步方法执行完成。当然语法上强制规定await只能出现在asnyc函数中，先来看看

不念不忘少年蓝@/ 2023年10月13日 17:26/ 0 赞/ 63 阅读

相关用 async/await 来处理异步

用 async/await 来处理异步昨天看了一篇vue的教程，作者用async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await

青旅半醒/ 2023年08月17日 16:50/ 0 赞/ 122 阅读

相关用 async/await 来处理异步

async和await 用了同步的方式去做异步 async定义的函数的返回值都是promise await后面的函数会先执行一遍，然后就会跳出整个async函数来执行后面js栈

- 日理万妓/ 2023年08月17日 16:42/ 0 赞/ 48 阅读

相关异步IO -async_await

python为了将语义变得更加明确,关键字async用于定义原生协程 await后面的是Awaitable函数,await 可以理解为yield from asyn

Myth丶恋晨/ 2023年07月25日 06:15/ 0 赞/ 17 阅读

相关 async + await 优雅处理异步

开发的时候偶尔遇到回调地狱的问题 function ajax(fn) { setTimeout(() => { conso

不念不忘少年蓝@/ 2023年07月18日 14:21/ 0 赞/ 13 阅读

相关 async和await 优雅处理异步

文章目录 function delay(word) { return new Promise((resolve, reject) => {

痛定思痛。/ 2022年11月30日 01:28/ 0 赞/ 253 阅读

相关用 async/await 来处理异步

git地址：[https://gitee.com/minedy/async][https_gitee.com_minedy_async] 用async/ await来发送异

忘是亡心i/ 2022年10月30日 11:24/ 0 赞/ 161 阅读

相关 vue中用async/await 来处理异步

用async/ await来发送异步请求，从服务端获取数据，等待获取数据，然后处理数据。 methods: { async generateData

太过爱你忘了你带给我的痛/ 2022年02月28日 15:54/ 0 赞/ 250 阅读

相关如何优雅地处理Async/Await的异常？

译者按：使用`.catch()`来捕获所有的异常原文: [Async Await Error Handling in JavaScript][] 译者: [F

红太狼/ 2021年11月26日 13:31/ 0 赞/ 403 阅读

相关 vue中用async/await 来处理异步

\\用async/await \\ 来处理异步先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思，异步函数

逃离我推掉我的手/ 2021年10月18日 13:28/ 0 赞/ 271 阅读