axios关于QS 序列化问题总结

Posted 2021-09-21 在奋斗的大道

qs 安装

// 安装qs,执行如下指令
cnpm install qs

在Vue 项目文件中的main.js 文件，定义qs 序列化工具类的全局引用。核心代码如下：

axios 表单请求，需要进行参数序列化

针对post 表单请求，需要进行请求参数序列化 ，实例代码如下：

    getData(){
         var params ={
          'pageNum': 1,
          'pageSize': 10,
         }

         this.$axios.post(
                "/user/page",
                // 2、将请求数据转换为form-data格式
                this.$qs.stringify(params),
                // 3、设置请求头Content-Type
                { headers:{ 'Content-Type':'application/x-www-form-urlencoded' }},
            ).then(res => {
                console.log(this)
                this.columnData = [{"label":"姓名", "prop":"name"}]
                // 把请求到的数据给testDatas数组
                this.tableDataList = res.data.data.list
                // 当前页数
                this.currentPageNum = res.data.data.pageNum
                // 当前页数量
                this.pagesizeNum = res.data.data.pageSize
                // 分页总数
                this.totalNum = res.data.data.total
              //   console.log(JSON.stringify(res.data.data.total))
            })
            .catch((error) => {
             console.log(error)
            })
        }
        
    }

 疑问一：

• QS.stringify做了什么操作？我能不能使用JSON.stringify来转换呢？

 不能使用JSON.stringify 替换QS.stringify  

eg：

JSON.stringify 序列化结果={"pageNum":1,"pageSize":10}  
QS.stringify 序列化结果=pageNum=1&pageSize=10

疑问二：

为什么一定要QS.stringify序列话？

原因：axios内部会自动对Object的入参进行转换，转换成json字符串，其实就是JSON.stringify的操作，同时，会指定Content-type为applicaltion/json。

源码：

transformRequest: [function transformRequest(data, headers) {
  // ...
    if (utils.isObject(data)) {
      setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
      return JSON.stringify(data);
    }
    return data;
}]

总结：

前后台在对接的时候，约定好入参格式：

1. 如果约定为纯JSON格式入参，即Content-Type=application/json。后台使用@RequestBody注解，接收前端传递的参数，前台直接使用axios.post即可，不再需要使用QS序列化。
2. 如果约定为纯表单格式入参，即Content-Type=application/x-ww-form-urlencoder。后台使用@RequestParam注解，接收前端传递的参数，前台使用axios.post提交参数，需要对data进行QS序列化操作。