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;
```
相关推荐
冰冻果冻6 分钟前
vue--制作随意滑动的相册
前端·javascript·vue.js
GISer_Jing26 分钟前
前端测试工具(Jest与Mock)
前端·测试工具
licy__37 分钟前
HTML 元素类型介绍
前端·css·html
谢尔登38 分钟前
【Next】路由处理
服务器·javascript·css
一雨方知深秋42 分钟前
WEB APIS(DOM对象,操作元素内容,属性,表单属性,自定义属性,定时器)
开发语言·前端·javascript
EasyNTS43 分钟前
视频流媒体播放器EasyPlayer.js网页直播/点播播放器:如何清除浏览器缓存
开发语言·javascript·缓存
三金121381 小时前
整站使用Vue(工程化)
前端·javascript·vue.js
什么都什么1 小时前
YonBuilder移动开发鸿蒙版本编译教程
javascript·app·移动开发·harmonyos·yonbuilder·纯血鸿蒙·apicloud
爪哇学长1 小时前
打造极致网页体验:HTML与CSS高级实战秘籍
前端·css·html
程序猴老王2 小时前
el-select 和el-tree二次封装
前端·vue.js·elementui