2020-11-12

最新推荐文章于 2024-07-25 12:41:07 发布

weixin_47212088

最新推荐文章于 2024-07-25 12:41:07 发布

阅读量85

点赞数

分类专栏：笔记文章标签： ajax

本文链接：https://blog.csdn.net/weixin_47212088/article/details/109654271

版权

笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

promise封装原生ajax

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

    let pro = function (url){
         
         return new Promise((resolve,reject)=>{ //创建promise实例化对象
              
              let xhr = new XMLHttpRequest() //创建xhr核心
              
              xhr.open("get",url,false) //配置请求地址和请求方式

              xhr.onreadystatechange((res)=>{
                //   判断是否请求成功
                  if(xhr.readyState==4&&xhr.status==200){
                        //  返回成功回调
                         resolve(xhr.responseText())
                  }else{
                      reject("失败") //请求失败用relove传递出去
                  }
                  

              })
            xhr.send() //向后台发送请求

         })
         

    }

    pro("www.baidu.com").then((res)=>{
          console.log(res)  //接收成功回调

    }).catch((err)=>{
           console.log(err)  //接收失败回调
    })


    </script>
</body>
</html>

promis封装$.ajax()

和封装原生基本一个思路只是ajax的写法不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
    <!-- 引入jq -->
</head>
<body>
    
    <script>

        let fun = function(url){


         return new Promise((resolve,reject)=>{

            $.ajax({
                type:"get",
                url,
                data:{},
                success(res){
                    resolve(res)
                },
                error(err){
                     reject(err)
                }
            })



        })
         
   
        }
       
    fun(" https://www.365msmk.com/api/app/courseBasis").then((res)=>{
        console.log(res)
    })
    


    </script>
</body>
</html>

promise封装fetch

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>


       let fet = function (url){
       
        return new Promise((resolve,reject)=>{
             
           resolve( fetch(url,{
                type:"get",
                query:"",
                success(res){
                     return res.text()
                }
            }))
           

        })

       }


      
        fet("https://www.365msmk.com/api/app/courseBasis").then((res)=>{
             return res.text()
        }).then((res)=>{
            console.log(JSON.parse(res))
        })



    </script>

</body>

</html>

weixin_47212088

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-11-12

promise封装原生ajax <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>
复制链接

扫一扫