一个简单的用async实现发送ajax函数的封装

async函数是ES6的一个很重要的函数。它改变了JavaScript处理异步事件的方式，使得JavaScript处理异步事件变得更加方便。

传统的JavaScript异步事件

回调函数

事件

发布者/订阅者模式

promise等等

 

如果在一个回调函数要用到另外一个回调函数返回的结果，那么在传统的JavaScript语句中会要在回调函数里面嵌套另外的回调函数。如果一层层嵌套下来。就会产生传说中的“异步回调地狱“，代码会变得庞大复杂且难以复用。一旦要修改其中某个回调函数，其他的都会收到影响。

传统写法是在发送ajax请求回调函数里在写另外一个ajax请求回调函数。

使用ES6的promise封装发送ajax请求函数

 

    function promise(url) {
        return new Promise(function (resolve, reject){
            var xhr = new XMLHttpRequest()
            xhr.onreadystatechange = handler
            xhr.open('GET',url)
            xhr.send(null)
            function handler() {
                if (xhr.readyState == 4 && xhr.status == 200){
                    resolve(xhr.responseText)
                }
            }
        })
    }
    promise('api.json')
        .then(function (res) {
            console.log(res)
            return promise(JSON.parse(res).url)
        })
        .then(function (res) {
            console.log(res)
        })

 

 

    function getJSON(url) {
        return new Promise(function (resolve, reject) {
            var ajaxObj = new XMLHttpRequest();
            ajaxObj.open("GET", url,true);
            ajaxObj.send();
            ajaxObj.onreadystatechange = function () {
                if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                    // console.log(ajaxObj.responseText)
                    resolve(ajaxObj.responseText)
                }
            }
        })
    }

    \\使用promise封装
    // getJSON('api.json')
    //     .then(function (res) {
    //         console.log(res)
    //         return getJSON(JSON.parse(res).url)
    //     })
    //     .then(function (res) {
    //         console.log(res)
    //     })


    \\使用async函数封装
    async  function asyncJSON(url) {
        var res_1 = await getJSON(url)
        console.log(res_1)
        var res_2 = getJSON(JSON.parse(res_1).url)
        return res_2
    }

    asyncJSON("api.json")
        .then(function (res) {
        console.log(res)
        })

另一个async函数的小栗子

function promise(value) {
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                return resolve(value)
            },1000)
        })
    }


    function promise_1(value){
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                return resolve(value)
            },1000)
        })
    }

    async function async(pro1Message,pro2Message) {
         var value1 =  await promise(pro1Message)
        console.log(value1)
         var value2 = await promise_1(pro2Message)
        console.log(value2)
    }

    async('hello','world')