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

发布时间：2023-03-30 10:00

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

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

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

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

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异步请求方案，同时线上接口请求所选城市的天气数据

请求结果如下：

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

注意：使用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异步解决方案的全析，喜欢的话可以点赞收藏喔！

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

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

相关推荐