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

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

 

首先需要安装插件：

?

1	npm i nprogress -S

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

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

?

1 2 3 4 5 6 7 8 9 10

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// 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)   } )

 当然也可以对进度条进行样式自定义

?

1 2 3

#nprogress .bar {      background: red !important; //自定义颜色    }