axios的post请求方法---以Vue示例
Posted lcspring
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了axios的post请求方法---以Vue示例相关的知识,希望对你有一定的参考价值。
Axios向后端提交数据的参数格式是json,而并非用的是form传参,post表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST请求如果不指定请求头RequestHeader,默认使用的Content-Type是text/plain;charset=UTF-8。
axios 请求配置中,transformRequest
配置允许在向服务器发送前,修改请求数据。
// `transformRequest` 允许在向服务器发送前,修改请求数据
// 只能用在 ‘PUT‘, ‘POST‘ 和 ‘PATCH‘ 这几个请求方法
// 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
transformRequest: [function (data)
// 对 data 进行任意转换处理
return data;
],
可以使用该配置修改请求参数。
参考资料:https://www.kancloud.cn/yunye/axios/234845
如下是axios的两种方法
方法一:
this.axios( url: ‘/user‘, method: ‘post‘, data: firstName: ‘Fred‘, lastName: ‘Flintstone‘ , transformRequest: [function (data) // Do whatever you want to transform the data let ret = ‘‘ for (let it in data) ret += encodeURIComponent(it) + ‘=‘ + encodeURIComponent(data[it]) + ‘&‘ return ret ], headers: ‘Content-Type‘: ‘application/x-www-form-urlencoded‘ )
当然可以在main.js
中进行配置
// main.js import Axios from ‘axios‘ import VueAxios from ‘vue-axios‘ const MyAxios = Axios.create( transformRequest: [function (data) // 将数据转换为表单数据 let ret = ‘‘ for (let it in data) ret += encodeURIComponent(it) + ‘=‘ + encodeURIComponent(data[it]) + ‘&‘ return ret ], headers: ‘Content-Type‘: ‘application/x-www-form-urlencoded‘ ) Vue.use(VueAxios, MyAxios)
参考链接:https://segmentfault.com/q/1010000008462977
方法二:使用qs模块/querystring模块
//import qs from ‘querystring‘ import qs from ‘qs‘ //export default .. this.axios( url: ‘/user‘, method: ‘post‘, data: firstName: ‘Fred‘, lastName: ‘Flintstone‘ , transformRequest: [function (data) data = qs.stringify(data); return data; ], headers:‘Content-Type‘:‘application/x-www-form-urlencoded‘ ) )
此方法操作前,需要先安装qs
npm install --save qs
参考链接:https://blog.csdn.net/shooke/article/details/76038967
以上是关于axios的post请求方法---以Vue示例的主要内容,如果未能解决你的问题,请参考以下文章