axios 实现请求 loading 效果

axios 请求与 loading 拦截器实现

最新推荐文章于 2024-02-01 18:23:39 发布

原创

最新推荐文章于 2024-02-01 18:23:39 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #loading效果 #axios #拦截器

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

在这里插入图片描述

前景提要：
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,
        lock

最低0.47元/天解锁文章