ajax封装：get封装方式、post封装方式

陌一一

于 2022-11-12 13:09:09 发布

阅读量1.1k

点赞数

分类专栏： web前端开发文章标签： ajax 前端 javascript jquery css3

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127817265

版权

web前端开发专栏收录该内容

281 篇文章 16 订阅

订阅专栏

ajax调用参数解释：

ajax({
       url:"http://localhost:3000/users",
       method:"POST",
       data:"username=lala&password=111",
       headers:{
            "content-type":"application/x-www-form-urlencoded"
       },
       success:function(res){
            console.log("success:",res)
       },
       error:function(err){
            console.log("error:",err)//js代码里面执行error回调函数，会传过来一个实参
       }
    })

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代码：

//因为data有可能会传进来的是一个对象，但post传的信息格式只有两种，一个是json对象，一个是表单
//这个函数是为了将对象转换为表单的格式
//函数调用在下面
function queryStringify(obj) {
    let str = ''
    for (let k in obj) str += `${k}=${obj[k]}&`
    //这个for循环执行后的结果是这样子的格式：
    //username=yiyi&password=123&
    //然后下面再用slice从0位置截取到最后一个位置的字符，但不包括最后一个字符
    //也就是截取下来的信息是这样的：username=yiyi&password=123
    return str.slice(0, -1)
  }
  
  // 封装 ajax
  //options是一个大对象，接收的形参；
  //因为到时候会从这个大对象了解构出来下面的url、method、async、data、headers等
  function ajax(options) {
    //定义一个defaultoptions默认对象，全部参数都定义了，防止options的实参有些参数没定义，就可以使用这里的默认值；
    let defaultoptions = {
      url: "",
      method: "GET",
      async: true,
      data: {},
      headers: {},
      success: function () { },
      error: function () { }
    }
    
    let { url, method, async, data, headers, success, error } = {
      ...defaultoptions,
      ...options
    }
    console.log(url, method, async, data, headers, success, error)
  
  
    if (typeof data === 'object' && headers["content-type"]?.indexOf("json") > -1) {
      data = JSON.stringify(data)
    }
    else {
      //queryStringify函数在最上面定义了
      data = queryStringify(data)
    }
    
    // 如果是 get 请求, 并且有参数, 那么直接组装一下 url 信息
    if (/^get$/i.test(method) && data) url += '?' + data
    
    // 4. 发送请求
    const xhr = new XMLHttpRequest()
    xhr.open(method, url, async)
    xhr.onload = function () {
      if (!/^2\d{2}$/.test(xhr.status)) {
        // console.log(error)
        error(`错误状态码:${xhr.status}`) //回调,执行error的回调函数，括号里是实参，
        return
      }
  
    // 执行解析
    //写try{}catch{}的作用是：可能后端传过来的数据解析错误，那success就执行不了，
    //下面的代码也都执行不了了，就卡在那里了，为了即使上面出错了，下面代码也能执行所以用了这样一个结构
    //如果发生try里面的代码发生错误，就执行catch的代码，不会因为错误代码就停了，出错了还会继续执行，但是会给你打印一个错误信息
      try {
        let result = JSON.parse(xhr.responseText)
        success(result)
      } catch (err) {
        error('解析失败 ! 因为后端返回的结果不是 json 格式字符串')
      }
    }
  
    // console.log(22222)
  
    // 设置请求头内的信息
    //请求头信息可能有多个，所以这里用for循环把它们遍历出来
    //将content-type设置在headers中
    for (let k in headers) xhr.setRequestHeader(k, headers[k])
    //设置一个既适用于get方式又适用于post方式的方法：
    if (/^get$/i.test(method)) {
        xhr.send()
      } else {
        xhr.send(data)
      }
  
    //  xhr.send(data)
   }

html代码：
get方式调用ajax函数：

<body>
    <script src="./util.js"></script>
    <script>
        //method:在get方式时不用传参数，因为后面我们定义的默认对象就是get，不传后面覆盖时默认是get
        //async、data、headers也不用传，因为get方式没有，就让他默认就行了；
        ajax({
            url:"http://localhost:3000/users",
            success:function(res){
                console.log("success:",res)
            },
            error:function(err){
                console.log("error:",err)//js代码里面执行error回调函数，会传过来一个实参
            }
        })
    </script>
</body>

post方式调用ajax函数：

<body>
    <script src="./util.js"></script>
    <script>
        //method:在get方式时不用传参数，因为后面我们定义的默认对象就是get，不传后面覆盖时默认是get
        //async、data、headers也不用传，因为get方式没有，就让他默认就行了；
        ajax({
            url:"http://localhost:3000/users",
            method:"POST",
            data:"username=lala&password=111",
            headers:{
                "content-type":"application/x-www-form-urlencoded"
            },
            success:function(res){
                console.log("success:",res)
            },
            error:function(err){
                console.log("error:",err)//js代码里面执行error回调函数，会传过来一个实参
            }
        })
    </script>
</body>

代码解释：

if (typeof data === 'object' && headers["content-type"]?.indexOf("json") > -1) {
      data = JSON.stringify(data)
   }
    else {
      //queryStringify函数在最上面定义了
      data = queryStringify(data)
   }

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

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