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示例的主要内容,如果未能解决你的问题,请参考以下文章

vue中axios的post和get请求示例

Vue基础入门讲义-异步请求axios

vue|axios发送post请求详解

vue中使用axios发送ajax请求

解决Vue axios post请求,后台获取不到数据的问题方法

VUE axios POST 发送跨域 cros 问题