React、Vue添加全局的請求進度條（nprogress）

全局的請求進度條，我們可以使用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)
  }
)

 當然也可以對進度條進行樣式自定義

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