1-11 axios的post请求

Axios的post请求

本篇讲解一下axios的post请求，安装的话，可查看上篇文章。下面看下基本写法：

this.$axios.post(url,{
user:"mrwang",
id:"1"
}).then(res =>{
console.log(res)
}).catch(error =>{
console.log(error)
})

当你如上写法以后，你会发现，接口请求失败，原因是参数缺失，你仔细研究过后，会发现，参数确实传了。为什么会说参数没有传递呢，其实问题出在这里：

axios接受的post请求接收的参数的格式有两种比较常用的：

1.from-data：
数据格式为：?name=wang&age=18

2.x-www-form-urlencoded：
数据格式为：{name:‘wang’,age:18}

然而post请求接受的参数格式应该为from-data格式。这个是时候你去查看你的参数，就会发现，你的请求默认格式实际上是第二种，所以接口请求失败，那么问题找到了，我们该如何做格式的转换呢，方法如下：

//这里面我们在当前组件内引入一个第三方库

import qs from 'qs'
第三方库上面有一个方法：qs.stringify()  把它写在传递的参数外层就可以了，如下：


this.$axios.post(url,qs.stringify({
user:"mrwang",
id:"1"
})).then(res =>{
console.log(res)
}).catch(error =>{
console.log(error)
})

其实，这里qs是querystring的简写，它主要是针对参数的转换的。具体可参考querystring官网。

再次进行接口的请求，我们会发现接口已经请求成功了。这个点很重要，vue里面做post请求是一定要进行格式转换的，不然post请求是不会成功的。