深入掌握Ajax + Promise + Async + await 异步解决方案

随着前端技术的不断更替,Ajax在整个JavaScript以及整个前端发展史都占据非常重要的地位,那么什么是Ajax?   AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,并不是一个新的编程语言喔!它是属于JavaScript网络请求模块的一部分。

 传统回调函数会造成回调地域问题,类似不同的异步函数相互嵌套,导致加重寻找bug的难度和代码的美观度的减少。

 那么这一次我们就来做一次对Ajax使用的深入透析。

首先我们先来看看我们的文件目录:

深入掌握Ajax + Promise + Async + await 异步解决方案_第1张图片

 json文件夹下有个静态资源文件,同时我们也要用一个接口去请求线上的数据。

使用Ajax 我们首先就要创建Ajax对象


        var btn = document.querySelector("button");
        var btn_ = document.getElementById("btn")
        let xhr = new XMLHttpRequest();
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest()
        } else {
            xhr = new ActiveXObject('')
        }

 上面是兼容性创建Ajax请求对象 ,两个按钮分别触发不同异步请求方案

首先是 Ajax+Promise

 function Ajax_GET(url) {
            return new Promise((res, rej) => {
                setTimeout(() => {
                    // open方法是ajax内置的请求方法 有三个参数 请求方式  地址  是否异步
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            res(JSON.parse(xhr.responseText));
                        }
                        // else {
                        //     rej("请求发生错误");
                        // }
                    }
                    // send方法是ajax内置发送请求方法 GET请求中 可以用传入参数,在POST请求中 需要传递相应参数
                    xhr.open("GET", url, true);
                    xhr.send(null);
                }, 1000)
            })
        }

        //方法一 then() 链式调用
        btn.onclick = function () {
            Ajax_GET("http://wthrcdn.etouch.cn/weather_mini?city=南昌").then(res => {
                console.log(res);

                //请求静态资源
                return Ajax_GET("../json/ceshi.json")
            }).then(res=>{
                console.log(res);
            })
        }

我们使用函数将ajax请求封装起来  btn触发Promise异步请求方案,同时线上接口请求所选城市的天气数据

请求结果如下:

深入掌握Ajax + Promise + Async + await 异步解决方案_第2张图片

 第一个是我们请求到所选城市的天气数据,第二个则是我们的本地的静态数据

注意:使用Vscode运行请求本地静态数据的时候,需要对本项目单独开一个端口,具体安装一个名为Live Server 的插件运行

第二个我们使用 Ajax+Async+await异步解决方案

 

 // 方法二  async await 异步解决方案
       btn_.onclick = async function(){
           try{
            let a = await Ajax_GET("../json/ceshi.json");
              console.log(a);
            
            let b = await Ajax_GET("http://wthrcdn.etouch.cn/weather_mini?city=深圳")
              console.log(b);
           }
           catch{
              console.log("请求发送出错");
           }
       }

Ajax_GET 方法在上面已经封装好

利用  Ajax+Async+await 就可以让代码更偏向于传统代码编写风格,可以完美的避开异步请求时的回调地域问题,让代码看起来更加简洁明了

 请求结果如下

深入掌握Ajax + Promise + Async + await 异步解决方案_第3张图片

 最后,所有封装方法奉上!!





    
    
    
    请求集合



    
    
    


以上就是 ajax+promise+async+await异步解决方案的全析,喜欢的话可以点赞收藏喔!

我是一个三观超正的博主,前端学习的路上一直都在,期待你的关注

你可能感兴趣的