前端请求拦截器

完整代码

import axios from "axios"

import {ElLoading} from "element-plus"
import router from "@/router"

import Message from "../utils/Message"

const contentTypeForm = 'application/x-www-form-urlencoded;charset=UTF-8'
const contentTypeJson = 'application/json'

const responseTypeJson = "json"

let loading = null;
const instance = axios.create({
    baseURL:'/api',
    timeout:10 * 1000,
});

//请求前拦截器
instance.interceptors.request.use(
    (config) => {
        if(config.showLoading){
            loading = ElLoading.service({
                lock:true,
                text:'加载中......',
                background:'rgba(0,0,0,0.7)',
            });
        }
        return config;
    },
    (error) => {
        if(config.showLoading && loading){
            loading.close();
        }
        Message.error("请求发送失败");
        return Promise.reject("请求发送失败");
    }
);

//请求后拦截器
instance.interceptors.response.use(
    (response) => {
        const {showLoading,errorCallback,showError = true,responseType} = response.config;
        if(showLoading && loading){
            loading.close()
        }

        const responseData = response.data;
        if(responseType == "arraybuffer" || responseType == "blob"){
            return responseData;
        }
        //正常请求
        if(responseData.code == 200){
            return responseData;
        }else if(responseData.code == 901){
            //登录超时：跳转到登录页面重新登录，并在登陆后重定向到之前的页面
            router.push("/login?redirectUrl=" + encodeURI(router.currentRoute.value.path));
            return Promise.reject({showError:showError,msg:"登录超时，请重新登录"});
        }else{
            //其他错误
            if(errorCallback){
                errorCallback(responseData.info);
            }
            return Promise.reject({showError:showError,msg:responseData.info});
        }
    },
    (error) => {
        if(error.config.showLoading && loading){
            loading.close();
        }
        return Promise.reject({showError:true,msg:"网络异常"});
    }
);

const request = (config) => {
    const {url,params,dataType,showLoading=true,responseType=responseTypeJson} = config;
    let contentType = contentTypeForm;
    let formData = new FormData(); //创建form对象
    for(let key in params){
        formData.append(key,params[key] == undefined ? "" : params[key]);
    }
    if(dataType != null && dataType == "json"){
        contentType = contentTypeJson;
    }

    let headers = {
        'Content-Type':contentType,
        'X-Request-With':'XMLHttpRequest',
    }

    return instance.post(url,formData,{
        onUploadProgress:(event) => {
            if(config.uploadProgressCallback){
                config.uploadProgressCallback(event);
            }
        },
        responseType:responseType,
        headers:headers,
        showLoading:showLoading,
        errorCallback:config.errorCallback,
        showError:config.showError
    }).catch(error => {
        console.log(error);
        if(error.showError){
            Message.error(error.msg);
        }
        return null;
    });
};

export default request;

小解释一下： 

1.创建axios实例，拦截以"/api"开头的请求，请求超时设置为10s

2.ElLoading是一个加载动画

3.后端返回901code，证明登录超时，这时要跳转到登录页面让用户重新登录，并且带上"redirectUrl=xxx"重定向到用户之前所在的页面。

4.export default request; 是 JavaScript 中用于导出模块的语法。它允许其他文件导入并使用这个request 函数。

该拦截器会拦截大部分请求，在main.js中注册为全局组件。该拦截器js文件在我的项目中目录结构为 src/utils/Request.js