nodeJS--封装AJAX

最新推荐文章于 2024-07-18 10:15:56 发布

H5_ljy

最新推荐文章于 2024-07-18 10:15:56 发布

阅读量91

点赞数

分类专栏： nodeJs 文章标签： ajax javascript 前端 node.js

本文链接：https://blog.csdn.net/qq_56973906/article/details/126148028

版权

nodeJs 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

一、回调封装AJAX
二、promise封装AJAX

一、回调封装AJAX

利用回调函数思想，将url和业务函数作为参数传进去；
我们只需将open的网址改为url，然后响应数据后，使用业务函数去接受这个数据并调用。

function myAjax(url,callback){
     let xhr=new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP")
     xhr.open("GET",url,true)
     xhr.send()
     xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
             callback(xhr.responseText)
        }
     }
}

使用myAjax

<button onclick="load()">点我请求ajax1数据</button>
    <script>
        function load() {
            myAjax("http://localhost:8081/ajax1", function (data) {
                console.log(data)
            })
        }
    </script>

在这里插入图片描述

二、promise封装AJAX

主要解决异步深层嵌套(回调地狱)的问题，它提供了简洁的API使得异步操作更加容易。

function promiseAjax(url) {
    let p1 = new Promise((resolve, reject) => {
        try {
            let xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP")
            xhr.open("GET", url, true)
            xhr.send()
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        resolve(xhr.responseText)
                    } else if (xhr.status == 400) {
                        reject(xhr.responseText)
                    } else {
                        reject("not 404 found")
                    }
                }
            }
        } catch (e) {
            reject(xhr.responseText)
        }

    })
    return p1
}

调用then取出正确数据

<body>
    <button onclick="load()">点我请求ajax1数据</button>
    <script>
        function load() {
            let p1 = promiseAjax("http://localhost:8081/ajax1") 
            console.log(p1)
            p1.then((data) => {
                console.log(data)
            })
            
        }
    </script>
</body>

在这里插入图片描述

H5_ljy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
nodeJS--封装AJAX

我们只需将open的网址改为url，然后响应数据后，使用业务函数去接受这个数据并调用。主要解决异步深层嵌套(回调地狱)的问题，它提供了简洁的API使得异步操作更加容易。利用回调函数思想，将url和业务函数作为参数传进去；调用then取出正确数据。...
复制链接

扫一扫