axios get和post请求传参格式

简介

使用 axios 请求数据时，分 get 和 post 两种情况，常规设置为

// http.js
let instance = axios.create({
  baseURL: '',
  timeout: 3000
})

instance.interceptors.request.use(config => {
  return config
})

instance.interceptors.response.use(response => {
  // 处理返回数据 response
})

其中请求头信息我们没有设置，直接采用默认值，一些常用的请求头信息可以查看前端js下载导出不同格式文件，做了一些简单的介绍

调用接口时

const ApiGetData = () => {
  return http({
    method: '', // 请求方法
    url: '', // 请求接口地址
  })
}

get请求参数

query参数

const ApiGetData = params => {
  return http({
    method: 'get', // 请求方法
    url: 'xxx/xx/x', // 请求接口地址
    params
  })
}

post请求参数

json参数

const ApiGetData = data => {
  return http({
    method: 'post', // 请求方法
    url: 'xxx/xx/x', // 请求接口地址
    data
  })
}

query参数

如果后端想要在 post 请求的时候也需要 get 那样的参数怎么办，就需要我们将请求参数做进一步改造

instance.interceptors.request.use(config => {
  if(config.method === 'post') {
    config.headers = {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
    config.transformRequest = [function(data) {
      let finalData = ''
      for(let key in data) {
        finalData += encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) + '&'
      }
      return finalData
    }]
  }
  return config
})

这里如果不设置头信息 headers 也可以，那就是默认值 application/x-www-form-urlencoded，但是如果主动设置 application/json参数就不对了，参数就会是序列化后的 JSON 字符串，试试

instance.interceptors.request.use(config => {
  if(config.method === 'post') {
    config.headers = {
      'Content-Type': 'application/json'
    }
    config.transformRequest = [function(data) {
      let finalData = ''
      for(let key in data) {
        finalData += encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) + '&'
      }
      return finalData
    }]
  }
  return config
})

虽然在浏览器中看到的头信息都是 application/json，但是请求发出的参数格式是不一样的。