axios的post请求方法---以Vue示例

时间 2020-05-07

标签 axios post 请求方法 vue 示例栏目 HTTP/TCP 繁體版

原文原文链接

Axios向后端提交数据的参数格式是json，而并不是用的是form传参，post表单请求提交时，使用的Content-Type是application/x-www-form-urlencoded，而使用原生AJAX的POST请求若是不指定请求头RequestHeader，默认使用的Content-Type是text/plain;charset=UTF-8。vue

axios 请求配置中，transformRequest配置容许在向服务器发送前，修改请求数据。ios

 // `transformRequest` 容许在向服务器发送前，修改请求数据 // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法 // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream transformRequest: [function (data) { // 对 data 进行任意转换处理 return data; }],

能够使用该配置修改请求参数。npm

参考资料：https://www.kancloud.cn/yunye/axios/234845json

以下是axios的两种方法axios

方法一：segmentfault

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

此方法操做前，须要先安装qsapp

npm install --save qs

参考连接：https://blog.csdn.net/shooke/article/details/76038967