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);
　　}
}

 

再在main.js添加代码

import api from './api';//我在src根目录建了个api文件夹,引用会自动查找文件下的index
Vue.prototype.$api = api;

用法与正常使用axios没有任何区别：

this.$api.post(url,params).then(res=>{
　　//处理代码
})