ajax和promise以及async await的实践分析

1. 使用ajax请求一个文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 id="content">.........</h1>
    <button id="btn">点我读取文件</button>
    <script>
        var content = document.getElementById('content');
        var btn = document.getElementById('btn');
        function ajax(method, url, data, successFn, failFn) {
            let xhr = new XMLHttpRequest();
            xhr.open(method, url);
            xhr.send();
            xhr.onreadystatechange = function() {
                console.log(xhr,'==========')
                if (xhr.readyState == '4') {
                    if (xhr.status == '200') {
                        //成功回调
                        successFn(xhr.responseText);
                    } else {
                        failFn(xhr.status);
                    }
                }
            };
        }
        
        function successFn(responTest) {
            console.log(responTest, '成功');
            content.innerText = responTest;
        }
        function failFn(status) {
            console.log(status, '失败');
        }
       btn.onclick = function(){
        ajax('get', './1.txt', {}, successFn, failFn);
       }
    </script>  
    
</body>
</html>

对应的文件1.txt

hello world

2.使用promise 和 async await 来分别处理一个请求和两个请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 id="content">文件1内容</h1>
    <h1 id="content_one">文件2内容</h1>
    <button id="btn">点我读取文件1</button>
    <button id="btn_two">点我读取文件2</button>
    <button id="btn_three">点击读取文件1和文件2(先一后二)</button>
    <button id="btn_four">读取文件1和文件2(都读取完毕再做处理)</button>
    <button id="btn_five">读取文件1和文件2(那个请求快处理哪个)</button>
    <button id="btn_six">先后读取文件1和文件2(async await)</button>
    <script src="http://code.jquery.com/jquery-2.1.1-rc2.min.js"></script>
    <script>
        let content = document.getElementById('content');
        let content_one = document.getElementById('content_one');
        let btn = document.getElementById('btn');
        let btn_two =  document.getElementById('btn_two');
        let btn_three = document.getElementById('btn_three');
        let btn_four = document.getElementById('btn_four');
        let btn_five = document.getElementById('btn_five');
        let btn_six = document.getElementById('btn_six');
        //包装的ajax 用于请求数据
        function ajaxPromise(url,method,data) {
            var pro = new Promise(function(resolve, reject) {
                var ajax = new XMLHttpRequest();
                var method=method||"GET"
                    var data=data ||null
                ajax.open(method, url);
                ajax.send(data);
                ajax.onreadystatechange = function() {
                    if (ajax.readyState == 4) {
                        if(ajax.status == '200'){
                            console.log(resolve,'======')
                            resolve(ajax.responseText);
                        }else{
                            reject(ajax.status);
                        }
                    }
                }
                
            })
            return pro;
        }

        //1.使用promise then的链式调用的方式 传入请求成功和失败的回调 来执行成功的逻辑和捕获异常

        btn.addEventListener('click',()=>{
            ajaxPromise("./1.txt").then(function(msg) {
                console.log(msg,'请求成功');
                content.innerText = msg;
            }, function(msg) {
                console.log(msg,'请求失败');
                content.innerText = msg;
            })
        })

        //2.使用async await方式来处理该请求 使用try catch来处理请求成功的逻辑和捕获异常

        btn_two.addEventListener('click',async ()=>{
            try{
                let res = await ajaxPromise("./1.json");
                console.log(res,'哈哈哈哈哈哈');
                let {success,data} = JSON.parse(res);
                if(success){
                    console.log(data,'请求成功');
                    let {showColumnsMap} = data;
                    let listArr = [];
                    Object.keys(showColumnsMap).forEach((key)=>{
                        listArr.push(showColumnsMap[key])
                    })
                    console.log(listArr,'=====')
                    let contentDom = listArr.map((item)=>{
                        return `<div>${item}<div/>`
                    })
                    console.log(contentDom,'=====')
                    content_one.innerHTML = contentDom.join('');
                    
                }
            }catch(error){
                console.log(error,'请求失败')
            }
        })

        //3.使用promise的then的链式调用方式 先后发两个请求 请求成功第一个文件后，再请求第二个文件 但凡第一个请求失败了，第二个请求也就不会去触发 被阻断了

        btn_three.addEventListener('click',()=>{
            ajaxPromise("./1.txt").then(function(msg) {
                console.log(msg,'第一个文件请求成功');
                content.innerText = msg;
                ajaxPromise('./1.json').then((res)=>{
                    let {success,data} = JSON.parse(res);
                    if(success){
                        console.log(data,'第二个文件请求成功');
                        let {showColumnsMap} = data;
                        let listArr = [];
                        Object.keys(showColumnsMap).forEach((key)=>{
                            listArr.push(showColumnsMap[key])
                        })
                        console.log(listArr,'=====')
                        let contentDom = listArr.map((item)=>{
                            return `<div>${item}<div/>`
                        })
                        console.log(contentDom,'=====')
                        content_one.innerHTML = contentDom.join('');
                    }
                },(err)=>{
                    console.log(err,'第二个文件请求失败')
                })
            }, function(msg) {
                console.log(msg,'第一个文件请求失败');
                content.innerText = msg;
            })
        });

        //4. 使用promise all的方式 请求两个接口，都成功后对于请求到的数据进行统一处理
        btn_four.addEventListener('click',()=>{
            Promise.all([ajaxPromise("./1.txt"),ajaxPromise('./1.json')]).then((res)=>{
                console.log(res,'请求成功')
                //处理第一个请求回来的数据
                let msg1 = res[0];
                content.innerText = msg1;
                //处理第二个请求回来的数据
                let dataObj = JSON.parse(res[1]);
                console.log(dataObj,'=======');
                let {data} = dataObj;
                console.log(data,'第二个文件请求成功');
                let {showColumnsMap} = data;
                let listArr = [];
                Object.keys(showColumnsMap).forEach((key)=>{
                    listArr.push(showColumnsMap[key])
                })
                console.log(listArr,'=====')
                let contentDom = listArr.map((item)=>{
                    return `<div>${item}<div/>`
                })
                console.log(contentDom,'=====')
                content_one.innerHTML = contentDom.join('');
            },(err)=>{
                console.log(err,'请求出错')
            })
        });

        //5. 使用promise race的方式 请求两个接口，于先完成的请求到的数据进行处理 如果某一个请求出错了，不会影响另外一个请求
        btn_five.addEventListener('click',()=>{
            Promise.race([ajaxPromise("./11.txt"),ajaxPromise('./1.json')]).then((res)=>{
                console.log(res,'请求成功');
                let resArr = res.split(' ');
                console.log(resArr,'===========')
                console.log(resArr,'===========')
                if(resArr.length<=2){
                    //处理第一个请求回来的数据
                    content.innerText = res;
                }else{
                    let {success,data} = JSON.parse(res);
                    if(success){
                        //处理第二个请求回来的数据
                        console.log(data,'第二个文件请求成功');
                        let {showColumnsMap} = data;
                        let listArr = [];
                        Object.keys(showColumnsMap).forEach((key)=>{
                            listArr.push(showColumnsMap[key])
                        })
                        console.log(listArr,'=====')
                        let contentDom = listArr.map((item)=>{
                            return `<div>${item}<div/>`
                        })
                        console.log(contentDom,'=====')
                        content_one.innerHTML = contentDom.join('');
                    }
                }
                
            },(err)=>{
                console.log(err,'请求出错')
            })
        });

        //6. 使用async await 的方式 哪个写在前面哪个先请求，一个请求失败，另一个也会被阻断。 使用这样的方式好处是在有异步回调嵌套的情况下比单纯的使用promise看起来代码逻辑和结构更清晰，
        //避免了回调嵌套回调的回调地狱问题,async await 的使用try catch来处理成功和捕获异常
        btn_six.addEventListener('click',async ()=>{
            try{
                let res2 = await ajaxPromise("./1.json");
                console.log(res2,'=========');
                if(res2){
                    let {success,data} = JSON.parse(res2);
                    if(success){
                        //处理第二个请求回来的数据
                        console.log(data,'第二个文件请求成功');
                        let {showColumnsMap} = data;
                        let listArr = [];
                        Object.keys(showColumnsMap).forEach((key)=>{
                            listArr.push(showColumnsMap[key])
                        })
                        console.log(listArr,'=====')
                        let contentDom = listArr.map((item)=>{
                            return `<div>${item}<div/>`
                        })
                        console.log(contentDom,'=====')
                        content_one.innerHTML = contentDom.join('');
                    }

                }
                let res1 = await ajaxPromise("./1.txt");
                console.log(res1,'========');
                if(res1){
                     //处理第一个请求回来的数据
                     content.innerText = res1;
                }
            }catch(error){
                console.log(error,'请求出错')
            }
            
        })



        
       
    </script>
    
    
</body>
</html>

对应的文件1.json

{
    "data": {
        "showColumnsMap": {
            "keyval2": "币种",
            "keyval3": "会计月",
            "inputstate": "录入标志",
            "pk_task": "所属任务",
            "finalfilecount": "管理报告数量",
            "pk_org": "报表主组织",
            "pk_report": "报表",
            "taskcheckstate": "任务审核状态",
            "inputperson": "录入人",
            "repcheckstate": "报表审核状态",
            "repcommitstate": "报表上报状态",
            "inputtime": "录入时间",
            "taskcommitstate": "任务上报状态"
        }
    },
    "success": true
}

以上实例即是ajax ，promise， async和await来处理异步的一些对比和分析。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容