利用Promise封装AJAX

最新推荐文章于 2024-03-13 11:16:45 发布

M78_国产007

最新推荐文章于 2024-03-13 11:16:45 发布

阅读量439

点赞数

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

本文链接：https://blog.csdn.net/m0_59345890/article/details/126131191

版权

node.js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

为什么会用Promise封装AJAX？

当我们在用自己封装的AJAX或者jquery帮我们封装的AJAX请求数据时，如果有一个需求是必须请求了这个数据才能请求下一个数据，就会嵌套很多重，就会形成回调地狱，代码说明：

$.get("/ajax1",(res1)=>{
					console.log(res1,JSON.parse(res1),111)
					$.get("/ajax2",(res2)=>{
						console.log(res2,JSON.parse(res2),222)
						$.get("/ajax3",(res3)=>{
							console.log(res3,JSON.parse(res3),333)
							$.get("/ajax4",(res4)=>{
								console.log(res4,JSON.parse(res4),444)
							})
						})
					})
				})

即只有请求了ajax1的数据才能请求ajax2的数据再请求ajax3的数据。。。依次往下推；

这就是回调地狱，回调函数的嵌套使用，达到异步间接变为的同步进行，这样做的确达到了业务需求，但是它的缺点十分明显。

回调地狱的缺点：

不便于阅读、不便于维护。

由此引入了Promise封装AJAX，实现链式调用，有效解决回调地狱的问题。

封装代码：

function myaxios(method,url){
    return new Promise((resolve,reject)=>{
        try {
            let xhr=new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP")
        xhr.open(method,url,true)
        xhr.send()
        //绑定监听
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    resolve(xhr.responseText)
                }else if(xhr.status==404){
                    reject(xhr.responseText)
                }else{
                    reject("not found")
                }
            }
        }
        } catch (error) {
            reject(xhr.responseText)
        }
    })
}

写一个项目测试一下：

建立接口：

var router=require("./router.js")

//创建接口
router.get("/ajax1",function(req,res){
    res.end('{"name":"zs"}')
})
router.get("/ajax2",function(req,res){
    res.end('{"name":"ls"}')
})
router.get("/ajax3",function(req,res){
    res.end('{"name":"ww"}')
})
router.get("/ajax4",function(req,res){
    res.end('{"name":"zl"}')
})

前端页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="fn()">promise封装ajax获取数据</button>
    <script src="./fzcode.js"></script>
    <script>
        function fn(){
            myaxios("GET","/ajax1")
            .then((data=>{
                console.log(data);
                return myaxios("GET","/ajax2")
            }))
            .then((data=>{
                console.log(data);
                return myaxios("GET","/ajax3")
            }))
            .then((data=>{
                console.log(data);
                return myaxios("GET","/ajax4")
            }))
            .then((data=>{
                console.log(data);
            }))
            .catch((err)=>{
                console.log(err);
            })
            
        }
    </script>
</body>
</html>

点击按钮控制台打印情况：

M78_国产007

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用Promise封装AJAX

这就是回调地狱，回调函数的嵌套使用，达到异步间接变为的同步进行，这样做的确达到了业务需求，但是它的缺点十分明显。即只有请求了ajax1的数据才能请求ajax2的数据再请求ajax3的数据。由此引入了Promise封装AJAX，实现链式调用，有效解决回调地狱的问题。为什么会用Promise封装AJAX？不便于阅读、不便于维护。...
复制链接

扫一扫