首页 前端知识 ajax封装:get封装方式、post封装方式

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

2024-01-24 15:01:28 前端知识 前端哥 208 859 我要收藏
  • 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”)这个方法,代码继续执行;
  • 这样保证即使前面为假,代码也可以往下执行,只是不调用这个方法了而已;

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/256.html
评论
发布的文章

js向上取整

2024-02-03 16:02:53

9、jQuery

2024-02-03 12:02:49

jQuery 遍历方法总结

2024-02-03 12:02:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!