设置axios格式为form-data

简介: 设置axios格式为form-data

最近在参与一个项目过程中遇到一个问题,相信大部分人都遇到过:

在后端与前端约定好application/json格式传递数据时,因为后台是go强类型语言,在定义api接口时,某些字段要求是整型类型,但是对于前端来说输入框或者从url中的search取到的参数都是字符串,不得不进行前端类型转换。


咋一看,对于接口参数比较少的api前端转换没有什么,但是对于一般的交互复杂,参数比较多的接口,要对大部分参数进行类型转换就是一种吃力不讨好的活。好在后端同学还支持另一种的前后端数据交互格式,即multipart/form-data。通过该格式后端取到前端传递的数据就是数字了(即使前端传递的是字符串),而不像json格式获取的是字符串。这样,就不需要额外对前端获取的数据进行特殊转换了。下面就来说说form-data。

multipart/form-data是基于post方法来传递数据的,并且其请求内容格式为Content-Type: multipart/form-data,用来指定请求内容的数据编码格式。

const instance = axios.create({
    baseURL: "https://api.it120.cc",
    //设置axios为form-data
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    transformRequest: [function (data) {
        let ret =''for (let it in data) {
            ret += encodeURIComponent(it) +'='+ encodeURIComponent(data[it]) +'&'        }
        return ret
    }]
})
目录
相关文章
|
4月前
|
JavaScript API
|
5月前
使用axios发送请求的格式是什么
使用axios发送请求的格式是什么
20 0
|
1月前
|
XML 数据格式
AXios接受XML格式的webservice并解析成数据格式
AXios接受XML格式的webservice并解析成数据格式
25 2
|
4月前
Axios有哪些常用的方法?格式是什么?写出两种即可
Axios有哪些常用的方法?格式是什么?写出两种即可
|
9月前
vue3中axios的格式及安装依赖
vue3中axios的格式及安装依赖
67 0
|
10月前
|
JavaScript 前端开发
Vue —— Axios 发送请求(常用格式)
Vue —— Axios 发送请求(常用格式)
133 0
|
19天前
|
JSON 前端开发 JavaScript
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
47 0
|
2月前
|
XML JavaScript 前端开发
axios如何在vue中使用
axios如何在vue中使用
29 1
|
19天前
|
JavaScript API
Vue中axios拦截器怎么使用
Vue中axios拦截器怎么使用
|
1月前
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
27 1