[!info] related notes

全局进度条_NProgress

• 背后的核心模式：代理模式 (Proxy) / 拦截器 (Interceptor)
• 在真实业务发生前后套一层拦截器，实现非侵入式的切面编程（AOP）

目标

在路由切换和 HTTP 请求时自动展示顶部进度条，提升用户感知性能。

前置条件

• Vue Router / React Router
• Axios 或原生 fetch

步骤

1. 安装

npm install nprogress
npm install -D @types/nprogress   # TypeScript 项目

2. 全局样式引入

// main.ts
import 'nprogress/nprogress.css';

3. 路由拦截（Vue Router）

// router/index.ts
import NProgress from 'nprogress';

NProgress.configure({ showSpinner: false, speed: 400 });

router.beforeEach((to, from, next) => {
  NProgress.start();
  next();
});

router.afterEach(() => {
  NProgress.done();
});

4. Axios 请求拦截

// utils/request.ts
import NProgress from 'nprogress';
import axios from 'axios';

const instance = axios.create({ baseURL: '/api', timeout: 10000 });

instance.interceptors.request.use((config) => {
  NProgress.start();
  return config;
});

instance.interceptors.response.use(
  (response) => {
    NProgress.done();
    return response;
  },
  (error) => {
    NProgress.done();
    return Promise.reject(error);
  }
);

5. 自定义样式

/* 覆盖 NProgress 默认颜色 */
#nprogress .bar {
  background: #409eff !important;
  height: 3px !important;
}

#nprogress .peg {
  box-shadow: 0 0 10px #409eff, 0 0 5px #409eff !important;
}

验证

1. 点击路由链接，确认顶部出现进度条动画
2. 发起 API 请求，确认进度条触发并在响应后消失
3. 快速连续跳转多个页面，确认不会出现进度条卡住（NProgress 内部有引用计数）