axios 封装【满足常规数据上传及file上传】

axios 封装【满足常规数据上传及file上传】

• request.js

/* 封装axios */
const axios = require('axios');

import {
    featchApiHeader,
    formApiHeader,
    baseApiUrl
} from './requestUtil.js';

const {
    Loading,
    Message
} = require('element-ui');

import router from '@/routes/routes'
import store from '@/store/store'
import qs from 'qs'

let loadingInstance = null; //loading实例

/* 创建实例时的基础默认配置，可以在请求时进行重写覆盖 */
const instance = axios.create({
    baseURL: baseApiUrl,
    timeout: 5000,
    method: 'post',
    headers: featchApiHeader
})

/* 拦截器 */
/**
 * @Description: 
 * - 在request 内通过对data类型的校验，区分是一般的post还是formdata文件上传
 * - 根据类型的不同改变成不同的headers
 * - 
 */
instance.interceptors.request.use(
    config => {
        loadingInstance = Loading.service({
            text: "请求中...",
            spinner: 'el-icon-loading'
        });
        if (config.method.toLowerCase() == "post") {
            let newdata = config.data;
            if (config.data instanceof FormData) { //文件类,文件类不需要stringify
                Object.assign(config.headers, formApiHeader); //修改`Content-Type`
                newdata.append("accessStr", localStorage.getItem("apiToken") || '')
            } else { //非文件类,stringify
                //空处理
                newdata = (typeof newdata == 'object' && Object.keys(newdata).length >= 0) ? newdata : {};

                newdata = {
                    ...newdata,
                    accessStr: localStorage.getItem("apiToken") || ''
                }
                newdata = qs.stringify(newdata);
            }
            config.data = newdata;
        }
        return config
    },
    error => {
        loadingInstance.close();
        Message({
            showClose: true,
            message: '请求错误，请您稍后重试！',
            type: 'error'
        });
        return Promise.reject(error)
    },
)

instance.interceptors.response.use(
    response => {
        loadingInstance.close();
        let resStatus = response.status;
        if (resStatus == 200) {
            return Promise.resolve(response)
        } else {
            return Promise.reject(response)
        }
    },
    error => {
        loadingInstance.close();
        if (error.response.status) {
            switch (error.response.status) {
                case 401: //未登录,从哪里来回哪里去
                    router.replace({
                        path: '/index',
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    });
                    break;
                case 403: //token过期
                    Message({
                        message: '登录过期，请重新登录',
                        duration: 1500
                    });
                    localStorage.removeItem("apiToken"); //清除token
                    store.commit("loginSuccess", ""); //全局通知loginSuccess为空
                    break;
                case 404:
                    Message({
                        message: '网络请求不存在',
                        duration: 1500
                    });
                    break;
                case 500, 501, 503: //服务端错误
                    Message({
                        message: '请求异常，请您稍后重试！',
                        duration: 1500
                    });
                    break;
                default:
                    Message({
                        message: error.response.data.message,
                        duration: 1500
                    });
                    break;
            }
            return Promise.reject(error)
        }

    },
)

export default instance

---

• requestUtil.js

/**
 * @Description: 
 * - 处理请求头，
 * - apitoken、针对一般的post和文件上传，设置不同的headers
 * - 根据环境获取不同的baseUrl
 */

const getApitoken = () => {
    return localStorage.getItem("apiToken") || '' //在登录时得到后存储起来
}

const commmonHeader = {
    'Accept': 'application/json',
    'Authorization': `Bearer ${getApitoken()}`
}

/* 常规的 */
export const featchApiHeader = {...commmonHeader,
    'Content-Type': 'application/x-www-form-urlencoded'
}

/* 文件的 */
export const formApiHeader ={...commmonHeader, 
    'Content-Type': 'multipart/form-data'
}

export const baseApiUrl = process.env.VUE_APP_API_BASEURL