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 = {}) {
    
    // 解决方案二：使用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请求方法:

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

总结

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