axios自定义请求配置—transformRequest

阅读完需：约 2 分钟

transformRequest在向服务器发送前，修改请求数据

PS：就是可以将原本的Form Data和json的连接头相互转换。

关于formdate和json的文档：

例子：

export const postKeyValueRequset=(url,params)=>{
    return axios({
      method:'post',
      url:`${base}${url}`,
      data:params,
      transformRequest:[function (data) {
          let ret='';
          for (let i in  data){
            ret+=encodeURIComponent(i)+'='+encodeURIComponent(data[i])+'&'
          }
          // console.log(ret);
          return ret;
      }],
      header:{
        'Content-Type':'application/x-www-form-urlencoded'
      }

    })
}

将原本需要用json 的进行传输的的格式用 'Content-Type':'application/x-www-form-urlencoded'来输出当成了formdate，并且用 transformRequest 来将data内容转换成了 formdate 格式，limit=50&offset=0&t=123 用 & 进行连接传输！

详细：

<script>
  import axios from 'axios'
  import qs from 'qs'

  // axios配置
  let http = axios.create({
    baseURL: 'https://www.easy-mock.com/mock/5d41580a1a802c0d5e53dcc2/example/',
    // 可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL

    transformRequest: [function (data) {
      // `transformRequest` 允许在向服务器发送前，修改请求数据
      // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法

      // return data
      // 必须要return不然console.log是undefine，而且network中也找不到
      // 但是return data：network中返回值是【object object】，所以需要用qs格式化一下
      // 所以需要return qs.stringify(data)

      return qs.stringify(data)
      // 此时network显示出的内容是
      // username: xiaoming
      // pass: 12345
      // 但是这种形式后台依旧无法识别，所以需要用到headers来自定义格式
    }],

    headers: {'content-type': 'application/x-www-form-urlencoded'},
    // 设置请求头，请求根据后端可以自定义，服务器处理数据用的
    // 后端可以根据请求传来的信息进行一些操作
    // 此时在network中查看可以发现传递的数据是：name=xiaoming&age=12&sex=man
  })
  export default {
    name: "create_headers",
    methods: {
      postUrl () {  //post方法
        http.post('bb',
          {
            'username': 'xiaoming',
            'pass': 12345
          },
          // f12在network查看到
          //   pass: 12345
          //   username: "xiaoming"

          // 但后台是查询不到的，
          // 必须要像get方法一样拼接才可以 username=xiaoming&pass=12345
          // 因此需要用到qs，在post提交数据前，需要把提交的数据进行序列化
          // 不然后端无法获取前端传递的数据
          // 所以需要用到transformRequest配置和headers配置
        )
          .then((res) => {
            console.log('post请求成功', res.data)
          })
          .catch((err) => {
            console.log('post请求成功', err)
          })
      }
    },
    created () {
      this.postUrl()
    }
  }
</script>