NProgresss使用以及封装

官方网站：NProgress: slim progress bars in JavaScript

下载地址：https://github.com/rstacruz/nprogress

🌈前言

NProgress 是一个轻量级的进度条组件，虽然这个组件已经好久没有更新了，但是该组件的使用频率还是高的。

🚀简单封装

1️⃣在项目中安装

这里的包管理工具使用的npm，如果你使用的是yarn或者pnpm，请自行更改安装命令，安装命令如下：

npm i nprogress -S

因为我们是TS的项目，还需要安装其类型声明文件，命令如下：

npm i @types/nprogress -D

在使用时如下方式引入就行：

// 引入进度条
import nprogress from 'nprogress'
​
// 引入进度条样式
import 'nprogress/nprogress.css'

2️⃣封装

为了规范点，进行简单的封装，在 utils 目录下新建 nporgress.ts 文件，引入 NProgress 和 CSS 样式文件。

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

根据官方提供的文档，我们可以进行修改一些配置。

NProgress.configure({
  easing: 'ease', // 动画方式
  speed: 1000, // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3, // 更改启动时使用的最小百分比
  parent: 'body', //指定进度条的父容器
})

最后我们封装两个方法，一个是开始方法，一个是结束的方法。

// 开启进度条
export const start = () => {
  NProgress.start();
};
 
// 关闭进度条
export const close = () => {
  NProgress.done();
};

3️⃣使用

一般我们会在页面切换，也就是跳路由的时候会显示进度条，因此我们需要在 beforeEach（路由切换之前） 和 afterEach（路由切换完成后） 使用我们定义好的 close 和 start 方法。首先在 router 中导入（根据情况自行导入），我的是在 src/router/index.ts

// 导入进度条
import { start, close } from "@/utils/nporgress";
在 beforeEach 和 afterEach中使用

router.beforeEach((pre, next) => {
  start()
  // 其他逻辑
})
 
router.afterEach(() => {
  close()
})

💡Axios中使用

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 
// 引入进度条
import nprogress from 'nprogress'
// 引入进度条样式
import 'nprogress/nprogress.css'
 
// 创建axios-实例
const requests = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_URL,
    timeout: 5000,
    headers: {......},
});
 
// 请求拦截
requests.interceptors.request.use((config) => {
 
    //开始加载-进度条开始
    nprogress.start();
 
    return config;
})
 
// 响应拦截
requests.interceptors.response.use((res) => {
    // 结束加载-进度条结束
    nprogress.done();
 
    // 请求成功
    return res;
}, (error) => {
    return Promise.reject(error)
})
 
export default requests;

🔔更改进度的颜色

进度条有一个默认的颜色，当然我们也可以更改为我们的想要的颜色，具体操作如下：

在 依赖包 node_modules 中找到 nprogress 中找到 nprogress.css 文件

效果图