51dev.com IT技术开发者社区

51dev.com 技术开发者社区

api接口统一封装

代码星球阅读(19)2020-08-01 收藏0次评论

 

具体的接口api模块,例如authorization.js

import axios from '../axiosWrapper'

let prefix = process.env.API_ROOT

// 查询权限管理列表数据
export const queryAuthTableList = (params) => {
return axios.get(`${prefix}/manager/space/relation/list?spaceId=${params.spaceId}`);
}
// 修改权限人
export const editAuthUsers = (params) => {
return axios.post(`${prefix}/manager/space/relation/edit`, params);
}


 引入各个业务模块 api.js

import * as common from './modules/commonApi'
import * as chart from './modules/chartApi'
import * as manage from './modules/manageApi'
import * as dashboard from './modules/tagDashboardApi'
import * as auth from './modules/authorizationApi'
import * as space from './modules/spaceApi'
import * as problem from './modules/problemViewApi'

export default {
common,
chart,
manage,
dashboard,
auth,
space,
problem
}


统一封装axios,axiosWrapper.js:
import axios from 'axios';
import Vue from 'vue'
import store from './../store'
import { Message } from 'element-ui'
let _this = new Vue();
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
config.withCredentials = true;
config.headers = config.headers || {};
let spaceId = store.state.common.spaceId
if( spaceId !== null && spaceId !== '' ){
config.headers['spaceId'] = spaceId;
}
config.headers['X-Requested-With'] = 'XMLHttpRequest';
config.headers['Access-Control-Allow-Origin'] = '*';
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use(function (response) {
// Do something with response data
//用户如果未登录,则跳转到登录页面
if (response.data.redirect) {
_this.$message({
showClose: true,
type: 'error',
message: `请重新登录!`
})
if (self === top) { // 当前窗口和顶层窗口是同一个,说明在一个框架中
// window.location.href = response.data.redirect;
} else {
window.parent.postMessage({ type: "not_login", url: response.data.redirect }, "*")
// window.top.postMessage({type:'not_login',url:redirectUrl},"*")
}
} else {
// 统一处理response状态码及错误
let responseData = response.data
if (responseData.code === 0 || responseData.code === 200 || responseData.status === 200) {
// Message.closeAll()
// console.log('axios', responseData.code)
return responseData;
}else{
Message.closeAll()
if(responseData.msg){
_this.$message({
showClose: true,
type: 'error',
message: `${responseData.msg}!`
});
}
return responseData;
}
}
}, function (error) {
// Do something with response error
Message.closeAll()
console.log('error.response', error.response)
let errorData = error.response.data
if(errorData.msg){
_this.$message({
showClose: true,
type: 'error',
message: `${error.response.data.msg}!`
});
}
return Promise.reject(error);
});

var http = axios.create({
timeout: 8000,
/*设置请求超时时间*/
baseURL: 'http://localhost:8080'
});
// Alter defaults after instance has been created
// http.defaults.headers.common['Authorization'] = '';

export default axios


index.js暴露各个模块api入口:
import api from './api'

export default api

以上就是api接口统一封装的全部内容。