解決回調地獄,異步變同步問題

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

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

  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章