Vue 中 Axios 的封装和 API 接口的管理

参考文章

Vue 中 Axios 的封装和 API 接口的管理

1.http.js

import axios from "axios";
import { Message } from "element-ui";
import _ from "lodash";
// create an axios instance
export default function createRequest(config) {
    config = _.assign(
        {
            baseURL: "", // url = base url + request url
            // withCredentials: true, // send cookies when cross-domain requests
            timeout: 5000, // request timeout
        },
        config || {}
    );
    let service = axios.create(config);
    bindInterceptor(service);
    return service;
}

function bindInterceptor(service) {
    // request interceptor
    service.interceptors.request.use(
        (config) => {
            var stoken = GetQueryString();
            if (stoken) {
                config.headers["authorization"] = "Bearer " + stoken;
            }
            return config;
        },
        (error) => {
            // do something with request error
            console.log(error); // for debug
            return Promise.reject(error);
        }
    );

    // response interceptor
    service.interceptors.response.use(
        /**
         * If you want to get http information such as headers or status
         * Please return  response => response
         */

        /**
         * Determine the request status by custom code
         * Here is just an example
         * You can also judge the status by HTTP Status Code
         */

        (response) => {
            const res = response.data;
            //根据响应头文件下载，拦截处理下载文件
            if (
                response.headers["content-type"] === "application/octet-stream"
            ) {
                let disposition = response.headers["content-disposition"];
                if (disposition) {
                    let blob = new Blob([response.data], {
                        type: "application/vnd.ms-excel",
                    });
                    let fileName = Date.parse(new Date()) + ".xlsx";
                    if (window.navigator.msSaveOrOpenBlob) {
                        navigator.msSaveBlob(blob, fileName);
                    } else {
                        var link = document.createElement("a");
                        link.href = window.URL.createObjectURL(blob);
                        link.download = fileName;
                        let evt = document.createEvent("MouseEvents");
                        evt.initEvent("click", true, true);
                        link.dispatchEvent(evt);
                        // 释放内存
                        window.URL.revokeObjectURL(link.href);
                    }
                } else {
                    Message.error("数据为空！");
                }
                return;
            }
            // if the custom code is not 20000, it is judged as an error.
            if (!res.success) {
                Message({
                    message: res.message || "Error",
                    type: "error",
                    duration: 5 * 1000,
                });

                // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
                if (res.code === 100005) {
                    // to re-login
                    window.location.assign(res.redirect);
                    // window.setTimeout(() => {
                    // }, 10)
                    return;
                }
                return Promise.reject(new Error(res.message || "Error"));
            } else {
                return res;
            }
        },
        (error) => {
            console.log(error); // for debug
            Message({
                message:
                    error.response && error.response.data
                        ? error.response.data.message
                        : error.message,
                type: "error",
                duration: 5 * 1000,
            });
            return Promise.reject(error);
        }
    );
}
function GetQueryString() {
    var obj = window.location.href;
    var index = obj.indexOf("="); //获取“token=”首次出现的位置
    var o = obj.substring(index + 1);
    return o;
}

2.request.js

import createRequest from './http'
import store from '../store'
import _ from 'lodash'

// private 的axios 实例
let service = null

function getInstance(config) {
    if (!service) {
        config = _.assign(
            {
                baseURL: store.getters['settings/baseApiUrl'], // url = base url + request url
                // withCredentials: true, // send cookies when cross-domain requests
                timeout: store.getters['settings/timeout'], // request timeout
            },
            config || {},
        )
        service = createRequest(config)
    }
    return service
}

export function getServer() {
    return store.getters['settings/baseApiUrl']
}

export function request(options) {
    let requestInstance = getInstance()
    return requestInstance(options)
}

// get接口
export function get(url, params) {
    return request({
        url: url,
        method: 'get',
        params,
    })
}

// post接口
export function post(url, data, params) {
    return request({
        url: url,
        method: 'post',
        data,
        params,
    })
}