api接口统一封装

 

具体的接口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