vue(axios)封装,content-type由application/json转换为application/x-www-form-urlencoded
前言
现在主流的http请求头的content-type有三种(不讨论xml):
application/x-www-form-urlencoded 最常见的提交数据方式,与原生form表单数据一致,在chrome调试工具中的表现形式为formdata
multipart/form-data 上传文件时的content-type类型
application/json 越发流行的提交数据方式,告诉服务端消息主题是序列化后json字符串,在chrome调试工具中的表现形式为payload。
axios默认的Content-type是application/json,但是我们的后端竟然告诉我不能接收这种数据,如果改动会对原来的某些业务有影响???(后来传复杂数据还是改了,但是这个工作我已经做了)
那么我要做的是将编码方式转为application/x-www-form-urlencoded,
即传输方式payload => form data ;
就是在请求头设置content-type,所以有了以下封装:
import axios from 'axios';
import qs from 'qs';
function api(method,url,params){
let param = {};
// 权限认证的一环,在每个请求中加入身份令牌token
if(params){
if(sessionStorage.getItem('token')){
params.token = sessionStorage.getItem('token');
}
// 此处用到qs.stringify(),作用是将参数序列化为url形式(a=1&b=2) 注意与JSON.stringify()的区别
param = qs.stringify(params);
}else{
if(sessionStorage.getItem('token')){
param.token = sessionStorage.getItem('token');
}
}
const Axios = axios({
baseURL:'/',//设置有代理
url:url,
timeout:10000,
method:method,
data:method==='POST'||method==="PUT"?param:null,
params:method==='GET'||method==="DELETE"?param:null,
headers:{
"Content-Type":"application/x-www-form-urlencoded;charset-utf-8"
}
})
return Axios;
}
export default{
get(url,params){
return api('GET',url,params);
},
post(url,params){
return api('POST',url,params);
},
put(url,params){
return api('PUT',url,params);
},
delete(url,params){
return api('DELETE',url,params);
}
}
// 此处用到qs.stringify(),作用是将参数序列化为url形式(a=1&b=2) 注意与JSON.stringify()的区别
再在main.js添加代码
import api from './api';//我在src根目录建了个api文件夹,引用会自动查找文件下的index
Vue.prototype.$api = api;
用法与正常使用axios没有任何区别:
this.$api.post(url,params).then(res=>{
//处理代码
})