vue axios POST传参问题

这段时间在一边在学习一边再用vue做实例项目，期间遇到的坑记录下。

因为做到的项目需要ajax与后台交互，用的框架是vue的，自然优先选择了vue的axios

简单做个axios的介绍，官方的原文：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

在vue1.0版本中是使用vue-resource进行ajax发送，后来vue2.0版本中vue官方推荐使用axios来完成ajax请求，同时停止了对vue-resource的维护

vue本身是不具备发送ajax请求的，所以需要借助axios这个第三方库来完成ajax请求。

axios的语法如下：

GET请求

// 向具有指定ID的用户发出请求
    axios.get('/user?ID=12345')
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    });
     
    // 也可以通过 params 对象传递参数
    axios.get('/user', {
    params: {
    ID: 12345
    }
    })
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    });

POST请求：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
    })
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    });

我按照官方提供的实例代码去使用POST请求，发现后台完全接收不到参数，找了些资料，原因好像是因为axios的传输格式和ajax的传输方式不同，导致后台接收不到参数（我用的是php作后台。

解决办法就是需要把数据格式转换成form-data格式

要转换成form-data格式需要qs包，如果是通过npm安装的axios，那一般在你安装axios后qs就已经自带了，如没有的话自行使用命令 npm install 安装。

安装好后需要引入qs包

import qs from 'qs';

然后转换格式

var data = qs.stringify({

                    name: '123',

                    pass: '123'

                });

然后再把data当成值传给后台就好了。

具体代码如下：

        var data = qs.stringify({

                    name: "123",

                    pass: "123",


                });

	this.$axios.post("后台地址", data).then(function (response) {

                        console.log(response);

                    }).catch(error => {

		      	 console.log(error);

	      		});

好了，到这后不出意外后台已经可以接收到参数了，希望能帮得上需要的小伙伴们。