devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ajax封装：get封装方式、post封装方式_$ajax 封装headers

作者：Gausst松鼠会 | 2024-02-26 23:10:25

赞

踩

$ajax 封装headers
  • ajax调用参数解释：
  1. ajax({
  2.        url:"http://localhost:3000/users",
  3.        method:"POST",
  4.        data:"username=lala&password=111",
  5.        headers:{
  6.             "content-type":"application/x-www-form-urlencoded"
  7.        },
  8.        success:function(res){
  9.             console.log("success:",res)
  10.        },
  11.        error:function(err){
  12.             console.log("error:",err)//js代码里面执行error回调函数，会传过来一个实参
  13.        }
  14.     })
  • ajax：这里的ajax是封装的函数名，这个函数名随便起，函数定义是在js代码中；
  • url：数据请求的链接url一定要有；
  • method：为了让这种封装方式适用于各种请求方式，要在调用的时候有一个method参数来接收请求方式； 
  • method:接收各种请求方式：get、post、put、patch、delete；
  • data：post方式等不同方式要传输的数据，放在data里；
  • async：是否异步，参数可传可不传，不传默认是true：异步；false：同步；
  • headers：因为我们在用post方式时，传给后端的信息有两种方式：一种是表单格式，一种是json格式，所以要有这个headers参数，放信息格式；
  • success和error是回调函数，一个成功的回调，一个失败的回调，函数调用会在js代码中实现；
  • 最后因为参数多，我们可以用对象的方式将它们放在一起，传进ajax这个函数里；

 

  • ajax封装代码：
  • js代码：
  1. //因为data有可能会传进来的是一个对象，但post传的信息格式只有两种，一个是json对象，一个是表单
  2. //这个函数是为了将对象转换为表单的格式
  3. //函数调用在下面
  4. function queryStringify(obj) {
  5.     let str = ''
  6.     for (let k in obj) str += `${k}=${obj[k]}&`
  7.     //这个for循环执行后的结果是这样子的格式：
  8.     //username=yiyi&password=123&
  9.     //然后下面再用slice从0位置截取到最后一个位置的字符，但不包括最后一个字符
  10.     //也就是截取下来的信息是这样的：username=yiyi&password=123
  11.     return str.slice(0, -1)
  12.   }
  13.   
  14.   // 封装 ajax
  15.   //options是一个大对象，接收的形参；
  16.   //因为到时候会从这个大对象了解构出来下面的url、method、async、data、headers等
  17.   function ajax(options) {
  18.     //定义一个defaultoptions默认对象，全部参数都定义了，防止options的实参有些参数没定义，就可以使用这里的默认值；
  19.     let defaultoptions = {
  20.       url: "",
  21.       method: "GET",
  22.       async: true,
  23.       data: {},
  24.       headers: {},
  25.       success: function () { },
  26.       error: function () { }
  27.     }
  28.     
  29.     let { url, method, async, data, headers, success, error } = {
  30.       ...defaultoptions,
  31.       ...options
  32.     }
  33.     console.log(url, method, async, data, headers, success, error)
  34.   
  35.   
  36.     if (typeof data === 'object' && headers["content-type"]?.indexOf("json") > -1) {
  37.       data = JSON.stringify(data)
  38.     }
  39.     else {
  40.       //queryStringify函数在最上面定义了
  41.       data = queryStringify(data)
  42.     }
  43.     
  44.     // 如果是 get 请求, 并且有参数, 那么直接组装一下 url 信息
  45.     if (/^get$/i.test(method) && data) url += '?' + data
  46.     
  47.     // 4. 发送请求
  48.     const xhr = new XMLHttpRequest()
  49.     xhr.open(method, url, async)
  50.     xhr.onload = function () {
  51.       if (!/^2\d{2}$/.test(xhr.status)) {
  52.         // console.log(error)
  53.         error(`错误状态码:${xhr.status}`) //回调,执行error的回调函数，括号里是实参，
  54.         return
  55.       }
  56.   
  57.     // 执行解析
  58.     //写try{}catch{}的作用是：可能后端传过来的数据解析错误，那success就执行不了，
  59.     //下面的代码也都执行不了了，就卡在那里了，为了即使上面出错了，下面代码也能执行所以用了这样一个结构
  60.     //如果发生try里面的代码发生错误，就执行catch的代码，不会因为错误代码就停了，出错了还会继续执行，但是会给你打印一个错误信息
  61.       try {
  62.         let result = JSON.parse(xhr.responseText)
  63.         success(result)
  64.       } catch (err) {
  65.         error('解析失败 ! 因为后端返回的结果不是 json 格式字符串')
  66.       }
  67.     }
  68.   
  69.     // console.log(22222)
  70.   
  71.     // 设置请求头内的信息
  72.     //请求头信息可能有多个，所以这里用for循环把它们遍历出来
  73.     //将content-type设置在headers中
  74.     for (let k in headers) xhr.setRequestHeader(k, headers[k])
  75.     //设置一个既适用于get方式又适用于post方式的方法：
  76.     if (/^get$/i.test(method)) {
  77.         xhr.send()
  78.       } else {
  79.         xhr.send(data)
  80.       }
  81.   
  82.     //  xhr.send(data)
  83.    }
  • html代码：
  • get方式调用ajax函数：
  1. <body>
  2.     <script src="./util.js"></script>
  3.     <script>
  4.         //method:在get方式时不用传参数，因为后面我们定义的默认对象就是get，不传后面覆盖时默认是get
  5.         //async、data、headers也不用传，因为get方式没有，就让他默认就行了；
  6.         ajax({
  7.             url:"http://localhost:3000/users",
  8.             success:function(res){
  9.                 console.log("success:",res)
  10.             },
  11.             error:function(err){
  12.                 console.log("error:",err)//js代码里面执行error回调函数，会传过来一个实参
  13.             }
  14.         })
  15.     </script>
  16. </body>
  • post方式调用ajax函数：
  1. <body>
  2.     <script src="./util.js"></script>
  3.     <script>
  4.         //method:在get方式时不用传参数，因为后面我们定义的默认对象就是get，不传后面覆盖时默认是get
  5.         //async、data、headers也不用传，因为get方式没有，就让他默认就行了；
  6.         ajax({
  7.             url:"http://localhost:3000/users",
  8.             method:"POST",
  9.             data:"username=lala&password=111",
  10.             headers:{
  11.                 "content-type":"application/x-www-form-urlencoded"
  12.             },
  13.             success:function(res){
  14.                 console.log("success:",res)
  15.             },
  16.             error:function(err){
  17.                 console.log("error:",err)//js代码里面执行error回调函数，会传过来一个实参
  18.             }
  19.         })
  20.     </script>
  21. </body>

 

  • 代码解释：
  1. if (typeof data === 'object' && headers["content-type"]?.indexOf("json") > -1) {
  2.       data = JSON.stringify(data)
  3.    }
  4.     else {
  5.       //queryStringify函数在最上面定义了
  6.       data = queryStringify(data)
  7.    }

这个headers["content-type"]后面的问号的含义是：

  • 如果前面为假，就不执行后面这个“.”的方法；
  • 所以这句代码的含义是：如果headers["content-type"]为假，那么就不调用这个indexOf（“json”）这个方法，代码继续执行；
  • 这样保证即使前面为假，代码也可以往下执行，只是不调用这个方法了而已；

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/148066
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号