vue(axios)封装,content-type由application/json转换为application/x-www-form-urlencoded

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=>{
  //处理代码
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值