这几天在使用vue中axios发送get请求的时候很顺手，但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在，当时就纳闷了，经过查阅资料，终于得到了解决方案，在此做一总结：
首先我们在运用npm install axios的时候就会默认安装qs，因此我们就得将qs引入到axios中，然后需要再通过实例化一个新的axios,并且设置他的消息头为'content-type': ‘application/x-www-form-urlencoded'
let qs = require('qs');
let instance = axios.create({
headers: { 'content-type': 'application/x-www-form-urlencoded' }
});
let data = qs.stringify({
"user_id": this.user_id,
"cate_name": this.cateName
});
instance.post("./frontend/web/cate/create", data)
.then(res => {
if (res.status == ) {
alert("添加成功！")
this.initTableData();
}
})
.catch(err => {
console.log(err);
});
优化后：
main.js:
import QS from 'qs'
Vue.prototype.qs = QS
Vue.prototype.$$ajax = Axios.create({
header: { "content-type": "application/x-www-form-urlencoded" }
})
***.vue:
let data = this.qs.stringify({
id: this.user_id,
password: this.newPassword
});
this.$$ajax.post("./frontend/web/user/uppwd", data)
.then(res => {
if (res.status == ) {
alert("恭喜你，密码修改成功！");
this.$router.push({ name: "personalCenter" });
}
})
.catch(err => {
console.log(err);
})
这样就能解决vue中利用axios发送post请求失败的问题。
另外，我们通常在利用 axios 的时候，需要对其进行拦截（请求数据出现 loading 图标），下面代码可对 axios 请求进行拦截：
// http request 请求拦截器，有token值则配置上token值
Axios.interceptors.request.use(
config => {
if (token) { // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
config.headers.Authorization = token;
}
return config;
},
err => {
return Promise.reject(err);
}); // http response 服务器响应拦截器，这里拦截401错误，并重新跳入登页重新获取token
Axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
switch (error.response.status) {
case :
// 这里写清除token的代码
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
})
}
}
return Promise.reject(error.response.data)
});
Axios.interceptors.request.use(config => {
MintUi.Indicator.open({
text: '加载中...',
spinnerType: 'fading-circle'
});
return config;
})
Axios.interceptors.response.use(response => {
MintUi.Indicator.close();
return response;
})
post方法封装资料：
https://blog.csdn.net/hant1991/article/details/74931158
https://blog.csdn.net/u010214074/article/details/78851093
可借助 vue-axios 组件库
完全封装：