React、Vue添加全局的请求进度条（nprogress）

马克社区

发布于 2022-04-08 20:14:20

1.2K1

发布于 2022-04-08 20:14:20

文章被收录于专栏：高端IT

全局的请求进度条，我们可以使用nprogress来实现，效果如下：

首先需要安装插件：

npm i nprogress -S

然后使用的时候主要有两种方式，第一种是切换页面的时候，第二种则是请求接口的时候。

切换页面可以在入口文件添加如下代码：

import NProgress from 'nprogress' // 引入nprogress插件
import 'nprogress/nprogress.css'  // 这个nprogress样式必须引入
 
router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})
router.afterEach(() => {
  NProgress.done()
})

接口请求的时候，则是在axios拦截器处进行处理，直接上代码：

// axios请求拦截器
axios.interceptors.request.use(
  config => {
    NProgress.start() // 设置加载进度条(开始..)
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// axios响应拦截器
axios.interceptors.response.use(
  function(response) {
    NProgress.done() // 设置加载进度条(结束..)
    return response
  },
  function(error) {
    return Promise.reject(error)

更多内容请见原文，文章转载自：https://blog.csdn.net/weixin_44519496/article/details/118522537

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端性能监控