1.请求封装(service/index.js文件)
/**
* @author
* @description 接口封装
*/
import axios from 'axios'
import router from "../router/index.ts";
const getIp = function (config) {
let url = "";
//configJson 为在App.vue里面调用方法获取的接口地址配置文件
let configJson = JSON.parse(sessionStorage.getItem('configJson'));
if (process.env.NODE_ENV === "development") {//开发环境
url = configJson.localServer;
} else {//打包环境
url = configJson.unitServer;
}
return url
}
const service = axios.create({
baseURL: "",
withCredentials: true,//携带cookie
timeout: 300000 //请求超时时间
// timeout: 0 //无限制
})
// request拦截器 request interceptor
service.interceptors.request.use(
config => {
config.baseURL = getIp(config);
//loginInfo 为登录时存在sessionStorage里面的登录信息
const loginInfo = JSON.parse(sessionStorage.getItem('loginInfo'));
const token = loginInfo ? loginInfo.token : null;
if (token) {
// config.headers.Authorization = `Bearer ${token}`;
config.headers.Authorization = token;
// config.headers.Worknum = loginInfo.user_id;
} else {
// console.log(router.currentRoute._value.fullPath, "router")
// console.log(router, "router")
if (router.currentRoute._value.fullPath !== '/login') {
router.replace({
path: '/'
});
}
}
return config;
},
err => {
return Promise.reject(err);
}
);
service.interceptors.response.use(response => {
const res = response.data;
if (response.data && res.code === 401) {
router.replace({
path: '/'
});
return Promise.reject(res)
} else {
return Promise.resolve(res)
}
}, error => {
return Promise.reject(error)
})
export default service
2.获取请求地址配置文件的方法(我是在App.vue组件加载时调用的,以下两个方法根据情况选其一)
//vue3项目config.json放在public文件下
export function getConfig() {
axios.get('./config.json').then(res => {
console.log(res, "发请求获取config.json");
if (res.status === 200) {
sessionStorage.setItem("configJson", JSON.stringify(res.data));
} else {
getConfig()
}
})
}
//vue2项目config.json放在static文件下
export function getLocalConfig() {
axios.get('../../static/json/config.json').then(res => {
console.log(res, "发请求获取config.json");
if (res.status === 200) {
sessionStorage.setItem("configJson", JSON.stringify(res.data));
} else {
getLocalConfig()
}
})
}
3.请求地址配置文件内容(config.json),vue3项目config.json放在public文件下,vue2项目config.json放在static文件下
{
"unitServer": "http://ip:端口",//打包环境
"localServer": "http://ip:端口",//开发环境
}
4.接口配置文件(api/utils.js)
import request from '../service/index' //引入封装的请求,路径根据实际的来
// 获取数据
export function getData(page, size) {
return request({
url: `/api/taobao/getDevice?page=${page}&size=${size}`,
method: 'get',
})
}
// 获取数据
export function getData1(obj) {
return request({
url: `/api/taobao/getDevice`,
method: 'get',
params: obj
})
}
// 新增
export function addData(data) {
return request({
url: `/api/taobao/addDevice`,
method: 'post',
data: data,
//timeout: 0 ,//也可单独为接口设置超时时间
})
}
// 修改
export function UpdateData(data) {
return request({
url: `/api/taobao/updateDevice`,
method: 'put',
data: data
})
}
// 删除
export function DelData(deviceid) {
return request({
url: `/api/taobao/deleteDevice/${deviceid}`,
method: 'delete',
})
}
5.接口调用:在需要调用接口的页面中引入接口配置文件(api/utils.js)中导出的接口,然后直接调用
getData("1","20").then(res => {
if (res.msg === "ok") {
console.log(res.data)//接口返回内容
}
})