1、安装axios
npm install axios -S
2、main.js引用,全局挂载
import {getRequest, postRequest} from 'common/axios'
// 挂载全局使用的方法
Vue.prototype.getRequest = getRequest
Vue.prototype.postRequest = postRequest
3、src文件夹下建立common文件夹,创建 axios.js 进行接口请求统一封装
import axios from 'axios';
import { Toast } from 'vant'
let base = '/api';
let API_ROOT = process.env.API_ROOT
axios.defaults.timeout = 15000;
axios.defaults.withCredentials = true
axios.interceptors.request.use(config => {
return config;
}, err => {
Toast('请求超时');
return Promise.resolve(err);
});
axios.interceptors.response.use(response => {
const data = response.data;
switch (data.code) {
case 210:
Toast(data.message);
break;
case 500:
Toast("联系管理员");
break;
default:
return data;
}
return data;
}, (err) => {
Toast('连接错误,请重试');
return Promise.resolve(err);
});
export const getRequest = (url, params) => {
let accessToken = getStore('accessToken');
return axios({
method: 'get',
url: `${API_ROOT}${base}${url}`,
params: params,
headers: {
'accessToken': accessToken
}
});
};
export const postRequest = (url, params) => {
let accessToken = getStore("accessToken");
return axios({
method: 'post',
url: `${API_ROOT}${base}${url}`,
data: params,
transformRequest: [function (data) {
let ret = '';
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
}
ret = ret.substring(0, ret.length - 1);
return ret;
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'accessToken': accessToken
}
});
};
export const putRequest = (url, params) => {
return axios({
method: 'put',
url: `${API_ROOT}${base}${url}`,
data: params,
transformRequest: [function (data) {
let ret = '';
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
}
ret = ret.substring(0, ret.length - 1);
return ret;
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'accessToken': accessToken
}
});
};
export const deleteRequest = (url, params) => {
let accessToken = getStore('accessToken');
return axios({
method: 'delete',
url: `${API_ROOT}${base}${url}`,
params: params,
headers: {
'accessToken': accessToken
}
});
};
export const getRequestWithNoToken = (url, params) => {
return axios({
method: 'get',
url: `${API_ROOT}${base}${url}`,
params: params
});
};
4、api文件夹里统一管理接口
import { getRequest, postRequest } from 'common/axios';
export const _getClolum = (params) => {
return getRequest('/get/colum', params)
}
export const _getSave = (params) => {
return postRequest('/vo/save', params)
}
5、具体组件内调用
import { _getSave } from "@/api/public.js";
const data={
pageNumber:this.pageNumber,
pageSize:this.pageSize
}
_getSave(data).then(res => {
if(res.code==200){
console.log(res)
}
});