axios post封装对象到后端_Vue简单封装axios之解决post请求后端接收不到参数问题...

1.在src/下新建api文件夹，api/下新建index.js和public.js

在public.js中：

import axios from 'axios';

import qs from 'qs'

import router from '../router'

import { MessageBox} from 'mint-ui'

// 注意点,按照以下写

var instance = axios.create();

instance.defaults.timeout = 10000;

instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

export default {

fetchGet(url, params = {}) {

return new Promise((resolve, reject) => {

axios.get(url, params).then(res => {

if(res.data.code === 302) {

MessageBox('提示', '登录失效,请重新登录');

MessageBox.alert('登录失效,请重新登录', '提示').then(action => {

router.push("/login");

});

}

resolve(res.data);

}).catch(error => {

reject(error);

})

})

},

fetchPost(url, params = {}) {

/*

axios post请求后端接收不到参数问题：

解决方案一：有效，但是兼容性不是很好，不是所有浏览器都支持

let data = new URLSearchParams()

for (var key in params) {

data.append(key, params[key])

}

*/

// 解决方案二：使用qs模块(axios中自带),使用qs.stringify()序列化params

return new Promise((resolve, reject) => {

axios.post(url, qs.stringify(params)).then(res => {

resolve(res.data);

}).catch(error => {

reject(error);

})

})

}

}

2.在index.js中：

import http from './public'

export const getStation = (params) => {

return http.fetchGet('/hydro/rest/getBelongUser', params);

}

export const userLogin = (params) => {

return http.fetchPost("/hydro/rest/login", params);

}

3.在Login.vue中调用post请求方法:

登录页面

import {userLogin} from "../../api/index"

export default {

name: 'app',

data() {

return {

Username: "",

Password: ""

}

},

methods: {

toLogin() {

let params = {

username: this.Username,

password: this.Password

};

userLogin(params).then(res => {

if(res.code === 200) {

this.$router.push("/home")

}

})

}

}

}

#### 4.在Home.vue调用get请求方法

{{stationName}}

import {getStation} from "../../api/index"

export default {

data() {

return{

stationName: ""

}

},

created() {

getStation().then(res => {

this.stationName = res.msg;

})

}

}

总结

以上所述是小编给大家介绍的Vue简单封装axios之解决post请求后端接收不到参数问题，希望对大家有所帮助！