axios 实现请求 loading 效果

最新推荐文章于 2025-04-18 11:44:53 发布

卡列尼娜翠花

最新推荐文章于 2025-04-18 11:44:53 发布

阅读量1.7k

点赞数

分类专栏： Axios 文章标签： javascript 前端 loading效果 axios 拦截器

本文链接：https://blog.youkuaiyun.com/qq_43220213/article/details/134194610

版权

本文介绍了如何使用 axios 封装一个请求 loading 效果，通过配置拦截器来控制 loading 的显示和关闭。在 config 中可以设置 loading 开关，并详细说明了全屏与局部 loading 的区别，以及在 axios 实例中注册 loading 拦截器的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

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

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

封装 loading 拦截器

请求拦截器开启 loading
响应拦截器关闭 loading
- 注意：无论请求成功或失败都应关闭 loading，因此在响应拦截器两个回调中都要关闭 loading。

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,

最低0.47元/天解锁文章