解决回调地狱，异步变同步问题

最新推荐文章于 2024-07-25 15:03:14 发布

原创最新推荐文章于 2024-07-25 15:03:14 发布 · 347 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#回调地狱 #es6解决回调地狱 #es7解决回调地狱 #promise解决回到地狱 #promise

web前端专栏收录该内容

66 篇文章

订阅专栏

本文深入探讨了回调地狱的概念，解释了在多个异步操作中如何出现这一问题，并提供了使用ES6的Promise和ES7的async/await来解决回调地狱的方法，使异步代码更加清晰和易于管理。

1.什么是回调地狱

回调地狱：多个ajax的请求出现了先后的关系，如：

       $.get('./json/a.json', function (value1) {
            $.get('./json/b.json', function (value2) {
                $.get('./json/c.json', function (value3) {
                })
            })
        })

由于ajax是一个异步操作，因为需要将每一个ajax变为同步，保证嵌套的ajax可以使用上一级ajax请求返回值

2.解决回调地狱

es6

利用promise + ajax,将ajax变为同步

       function newPromise(url, params = {}) {
            return new Promise((resolve, reject) => {
                $.get(url, params,function (value) {
                    resolve(value)
                })
            })
        }

        newPromise('./json/a.json')
        .then(bkey => {
            return newPromise('./json/b.json?bkey'+ bkey)
        }).then(ckey =>{
            return newPromise('./json/c.json?bkey'+ ckey)
        }
        ).then(msg =>{
            console.log(msg)
        })

promise的出现其实就是为了解决回调地狱，它是一个管道形式而不是嵌套形式，它是一层一层往下走。

promise利用reslove出去的数据，可以用then接收，reject的数据，用catch接收

es7

   function newPromise(url, params = {}) {
            return new Promise((resolve, reject) => {
                $.get(url, params,function (value) {
                    resolve(value)
                })
            })
        }

    //es7
    async function PromiseAjax(){
        //解决异步执行，让ajax变为同步
        let bkey = await newPromise('./json/a.json')
        let ckey = await newPromise('./json/b.json',{bkey})
        let cMsg = await newPromise('./json/c.json',{ckey})
    }

    PromiseAjax();