axios 修改http协议和转formData对象

修改协议

最近发现axios的修改协议有个很方便的操作,就是通过create创建一个axios对象的时候,就可以直接设置上传协议了。

const api = axios.create({
   headers: {
     'Content-Type': 'application/x-www-form-urlencoded',
   }
});

这样我们将协议改为了application/x-www-form-urlencoded

这个协议可以上传formData对象,但是他不能上传文件,所以如果你要上传文件,需要改为这个协议:multipart/form-data

如果默认配置无法满足,你可以使用官方提供的这种方式改写头信息

api({
  url:"xxxx",
  data:xxxx,
  headers:{
    'Content-Type': 'multipart/form-data'
  }
})

这样我们就可以覆盖默认的头信息设置了。

转formData对象

如果我们要发送一个formData对象,除了手动创建formData对象然后设置值,就是使用axios中自带的一个方法。

我百度出两种方法,第一种他虽然能转换成功,但是他会有一个多余的(empty),所以并不完美,所以就不多说了,我这里讲一下比较完美的方案

我们需要一个拦截器,你可以设置一个针对你某个api路径的,也可以全局的,我这里设置一个全局的

import qs from "qs";

api.interceptors.request.use(config => {
  config.data = config.data ? qs.stringify(config.data) : null;  //转为formdata数据
  return config;
}, error => {
  console.log(error);
  Promise.reject(error);
});

使用该方法转换的formData十分完美,为此我们需要引入一个qs对象,这个对象,你安装了axios他就有的,qs是axios一起带来的,所以不需要单独安装。

0

相关文章

微信收款码
微信收款码