解决vue项目上使用hexo请求变为request payload

发表于 | 分类于 |

引子

前段时间在使用vue搭建项目中碰到一个坑，我用自定义配置方式引入axios，此时post请求莫名其妙的变为Requst Payload，而我们常用的是Form Data，Requst Payload请求服务无法获取param，此时就要想办法如何转化数据了。

尝试

度娘上搜索，发现不少人说修改头信息为：

1
2
3
headers: {
    'Content-Type': 'application/x-www-form-urlencoded;application/json;charset=UTF-8;'
  },

我尝试后，发现类型真的变为form data，但是参数转化有问题：

1
{"loginNo":"test","loginPwd":"testtest"}:

并不是我们想要的结果，而且结尾处总是有”:”

qs

经查询发现qs库，虽然有了JSON.stringify方法，但和qs转化结果并不一样
比如有数据

1
var a = {name:'hehe',age:10};

使用JSON.stringify后为

1
"{"a":"hehe","age":10}"

而使用qs.stringify后：

1
name=hehe&age=10

最终尝试

axios官方文档上 Request Config 提供了一个配置：

1
2
3
4
5
transformRequest: [function (data, headers) {
  // Do whatever you want to transform the data

  return data;
}]

那我们把需要的参数放在这里转化一下即可

1
2
3
4
5
6
7
8
9
10
var qs = require('qs')
export function login(username, password) {
  return request({
    url: '/login',
    method: 'post',
    transformRequest: [function(data) {
      return qs.stringify({ param: JSON.stringify({ loginNo: username, loginPwd: password }) })
    }]
  })
}

控制台：

1
2
3
Form Data

param:{"loginNo":"test","loginPwd":"testtest"}

可以愉快的跟服务进行post请求了