axios 实现请求 loading 效果

前景提要:
ts 简易封装 axios,统一 API
实现在 config 中配置开关拦截器

loading 分为全屏 loading 和局部 loading。

axios 中设置 loading 只能设置全屏 loading,因为局部 loading 需要当前局部的 dom,在 axios 中显然拿不到发起请求的元素 dom。

封装 loading 拦截器

  1. 请求拦截器开启 loading
  2. 响应拦截器关闭 loading
    • 注意:无论请求成功或失败都应关闭 loading,因此在响应拦截器两个回调中都要关闭 loading。
typescript 复制代码
import { AxiosError, AxiosResponse } from "axios";
import { ElLoading } from "element-plus";
import { MyInternalAxiosRequestConfig } from "./request";

/**
 * el-loading 有两种方式调用:指令和服务。
 * 指令可以绑定到元素上,局部loading
 * 此处以服务方式调用loading,并且根据请求配置 showLoading 来决定请求是否开启loading
 * 此loading在全局拦截器生效,服务方式默认就是全屏
 */

/* 全局请求 loading(服务方式调用) */
let loadingInstance: ReturnType<typeof ElLoading.service>;

const startElementLoading = () => {
    loadingInstance = ElLoading.service({
        fullscreen: true,
        lock: true,
        text: "Loading",
        background: "rgba(0, 0, 0, 0.7)"
        // spinner:	自定义加载图标类名
        // customClass:	Loading 的自定义类名
    });
};

const endElementLoading = (loadingInstance: ReturnType<typeof ElLoading.service>) => loadingInstance.close();

/**
 * 开启loading
 * @param {import("..").AxiosRequestConfig} config
 * @returns
 */
export function showLoading(config: MyInternalAxiosRequestConfig) {
    if (config.showLoading === false) return config;
    startElementLoading();
    return config;
}

/**
 * 请求成功关闭 loading
 * @param {import("axios").AxiosResponse} res
 * @returns
 */
export function closeLoadingOnFulfilled(res: AxiosResponse) {
    if (loadingInstance) endElementLoading(loadingInstance);
    return res;
}

/**
 * 请求失败关闭 loading
 * @param {import("axios").AxiosError} err
 * @returns
 */
export function closeLoadingOnRejected(err: AxiosError) {
    if (loadingInstance) endElementLoading(loadingInstance);
    throw err;
}

在 config 中配置 loading 开关

typescript 复制代码
const DEFAULT_EXTRA_FEATURE_CONFIG = { showLoading: true, showMessage: true, retry: true };

/** 扩展 axios 的请求配置类型 */
export interface MyAxiosRequestConfig<TReqBodyData = any> extends AxiosRequestConfig<TReqBodyData> {
    showLoading?: boolean;
    showMessage?: boolean;
    retry?: boolean;
}

/** 给拦截器使用 */
export interface MyInternalAxiosRequestConfig extends InternalAxiosRequestConfig {
    showLoading?: boolean;
    showMessage?: boolean;
    retry?: boolean;
}

axios 实例化后注册 loading 拦截器

typescript 复制代码
import HttpRequest from "./http/request";
import { compareUrl, filterFulfilledUrlOnFulfilled, filterFulfilledUrlOnRejected } from "./http/debounceReq";
import { closeLoadingOnFulfilled, closeLoadingOnRejected, showLoading } from "./http/loading";
import { responseMessageOnFulfilled } from "./http/message";
import { getTokenResponseInterceptor, setAccessTokenRequestInterceptor } from "./http/token";
import { retryRequest } from "./http/retryRequest";

const httpRequest = new HttpRequest({
    baseURL: import.meta.env.VITE_APP_API_BASE_URL,
    timeout: import.meta.env.VITE_APP_API_TIMEOUT
});

// loading
httpRequest.getInstance().interceptors.request.use(showLoading);
httpRequest.getInstance().interceptors.response.use(closeLoadingOnFulfilled, closeLoadingOnRejected);

export default httpRequest;
```
相关推荐
喵叔哟25 分钟前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特1 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解1 小时前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~1 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS(跨域资源共享):原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
Mr.咕咕1 小时前
Django 搭建数据管理web——商品管理
前端·python·django