• 利用Promise封装AJAX

    为什么会用Promise封装AJAX？

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

    1. $.get("/ajax1",(res1)=>{
    2. 					console.log(res1,JSON.parse(res1),111)
    3. 					$.get("/ajax2",(res2)=>{
    4. 						console.log(res2,JSON.parse(res2),222)
    5. 						$.get("/ajax3",(res3)=>{
    6. 							console.log(res3,JSON.parse(res3),333)
    7. 							$.get("/ajax4",(res4)=>{
    8. 								console.log(res4,JSON.parse(res4),444)
    9. 							})
    10. 						})
    11. 					})
    12. 				})

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

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

    回调地狱的缺点：

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

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

    封装代码：

    1. function myaxios(method,url){
    2.     return new Promise((resolve,reject)=>{
    3.         try {
    4.             let xhr=new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP")
    5.         xhr.open(method,url,true)
    6.         xhr.send()
    7.         //绑定监听
    8.         xhr.onreadystatechange=function(){
    9.             if(xhr.readyState==4){
    10.                 if(xhr.status==200){
    11.                     resolve(xhr.responseText)
    12.                 }else if(xhr.status==404){
    13.                     reject(xhr.responseText)
    14.                 }else{
    15.                     reject("not found")
    16.                 }
    17.             }
    18.         }
    19.         } catch (error) {
    20.             reject(xhr.responseText)
    21.         }
    22.     })
    23. }

    写一个项目测试一下：

    建立接口：

    1. var router=require("./router.js")
    2.  
    3. //创建接口
    4. router.get("/ajax1",function(req,res){
    5.     res.end('{"name":"zs"}')
    6. })
    7. router.get("/ajax2",function(req,res){
    8.     res.end('{"name":"ls"}')
    9. })
    10. router.get("/ajax3",function(req,res){
    11.     res.end('{"name":"ww"}')
    12. })
    13. router.get("/ajax4",function(req,res){
    14.     res.end('{"name":"zl"}')
    15. })

    前端页面：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <button onclick="fn()">promise封装ajax获取数据button>
    11.     <script src="./fzcode.js">script>
    12.     <script>
    13.         function fn(){
    14.             myaxios("GET","/ajax1")
    15.             .then((data=>{
    16.                 console.log(data);
    17.                 return myaxios("GET","/ajax2")
    18.             }))
    19.             .then((data=>{
    20.                 console.log(data);
    21.                 return myaxios("GET","/ajax3")
    22.             }))
    23.             .then((data=>{
    24.                 console.log(data);
    25.                 return myaxios("GET","/ajax4")
    26.             }))
    27.             .then((data=>{
    28.                 console.log(data);
    29.             }))
    30.             .catch((err)=>{
    31.                 console.log(err);
    32.             })
    33.             
    34.         }
    35.     script>
    36. body>
    37. html>

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

  • 相关阅读:
    Nginx 日志配置
    LeetCode 12. 整数转罗马数字
    springboot中的一些配置（如端口号的更换）
    Axure8.0：移入菜单（带子菜单）
    小白学编程(CSS)：呼吸灯
    乾坤基础教程
    9.16总结
    联想电脑去掉开机广告 关闭开机广告 ideapad 去掉开机广告
    急如闪电快如风,彩虹女神跃长空,Go语言高性能Web框架Iris项目实战-初始化项目ep00
    Windows下编译安装FreeCAD 0.21
  • 原文地址：https://blog.csdn.net/m0_59345890/article/details/126131191