Vue前后端接口交互—— Axios api 接口文件配置

vue 本身是不支持 ajax 接口请求的，所以我们需要安装一个接口请求的 npm 包，来使我们的项目拥有这个功能。支持 ajax 的工具有很多。一开始，我使用的是 vue-resource这个工具。但是我后来发现其开发人员在一年就停止维护了，所以后来便改为了axios。
以下为 Axios api 接口文件的配置过程：
一、安装 axios 工具（在项目文件目录下）

npm install axios -D

二、新建了一个 src/api/index.js 这个空文本文件，并为其添加如下代码：

import axios from 'axios';

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
import qs from 'qs';

let base = 'http://xxxx.xxxx.com.cn/hubei/doc';
let base1 = 'http://xxxx.com';

let token = '';

let http = axios.create({
baseURL: 'http://localhost:8080/',
withCredentials: true,
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
},
transformRequest: [function (data) {
let newData = '';
for (let k in data) {
if (data.hasOwnProperty(k) === true) {
newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&';
}
}
return newData;
}]
});

function apiAxios(method, url, params, response) {
http({
method: method,
url: url,
data: method === 'POST' || method === 'PUT' ? params : null,
params: method === 'GET' || method === 'DELETE' ? params : null,
}).then(function (res) {
response(res);
}).catch(function (err) {
response(err);
})
}

export default {
get: function (url, params, response) {
return apiAxios('GET', url, params, response)
},
post: function (url, params, response) {
return apiAxios('POST', url, params, response)
},
put: function (url, params, response) {
return apiAxios('PUT', url, params, response)
},
delete: function (url, params, response) {
return apiAxios('DELETE', url, params, response)
}
}

三、在api/index.js文件中配置与后台交互的接口代码：
以下为实例代码：

export const bmz = params => { return axios.get(`${base1}/getGroupCodeList`, { params: params }); };

export const getOptList = params => { return axios.get(`${base1}/getOptList`, { params: params }); };

export const branchList = params => { return axios.get(`${base1}/branchList`, { params: params }); };

export const addOperator = params => { return axios.post(`${base1}/addOperator`, qs.stringify(params)).then(res => res.data); };

export const editBranch = params => { return axios.post(`${base1}/editBranch`, qs.stringify(params)).then(res => res.data);  };

export const addDzb = params => { return axios.post(`${base1}/addBranch`, qs.stringify(params)).then(res => res.data); };

export const partlist = params => { return axios.get(`${base1}/branchList`, { params: params }); };

export const memberList = params => { return axios.get(`${base1}/memberList`, { params: params }); };

export const selectMember = params => { return axios.get(`${base1}/selectMember`, { params: params }); };

export const addMember = params => { return axios.get(`${base1}/addMember`, { params: params }); };

export const branchFeeList = params => { return axios.get(`${base1}/branchFeeList`, { params: params }); };

export const memberFeeList = params => { return axios.post(`${base1}/getMemberFeeList`, qs.stringify(params)).then(res => res.data); };

export const getOptNameList = params => { return axios.get(`${base1}/getOptNameList`, { params: params }); };

export const createTask = params => { return axios.post(`${base1}/createTask`, qs.stringify(params)).then(res => res.data);  };

export const memberFee = params => { return axios.post(`${base1}/memberFee`, qs.stringify(params)).then(res => res.data);  };

export const uploadToken = params => { return axios.get(`${base1}/uploadToken`, { params: params });  };

export const savePic = params => { return axios.post(`${base1}/savePic`, qs.stringify(params)).then(res => res.data);  };

我们在此将此项目所用到的所有接口调用方法都做了定义，这样既方便查看也利于管理。在我们需要调用接口方法的时候，我们只需要在对应vue文件中的标签里直接import想用的接口方法就行了，例如：

import { getOptList,branchList,addOperator } from "../../api/index";