React、Vue添加全局的請(qǐng)求進(jìn)度條（nprogress）

全局的請(qǐng)求進(jìn)度條，我們可以使用nprogress來實(shí)現(xiàn)，效果如下：

首先需要安裝插件：

npm i nprogress -S

 然后使用的時(shí)候主要有兩種方式，第一種是切換頁(yè)面的時(shí)候，第二種則是請(qǐng)求接口的時(shí)候。

切換頁(yè)面可以在入口文件添加如下代碼：

    import NProgress from 'nprogress' // 引入nprogress插件
    import 'nprogress/nprogress.css'  // 這個(gè)nprogress樣式必須引入
     
    router.beforeEach((to, from, next) => {
      NProgress.start()
      next()
    })
    router.afterEach(() => {
      NProgress.done()
    })

 接口請(qǐng)求的時(shí)候，則是在axios攔截器處進(jìn)行處理，直接上代碼：

    // axios請(qǐng)求攔截器
    axios.interceptors.request.use(
      config => {
        NProgress.start() // 設(shè)置加載進(jìn)度條(開始..)
        return config
      },
      error => {
        return Promise.reject(error)
      }
    )
    // axios響應(yīng)攔截器
    axios.interceptors.response.use(
      function(response) {
        NProgress.done() // 設(shè)置加載進(jìn)度條(結(jié)束..)
        return response
      },
      function(error) {
        return Promise.reject(error)
      }
    )

 當(dāng)然也可以對(duì)進(jìn)度條進(jìn)行樣式自定義

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

 

歡迎關(guān)注微信公眾號(hào):猴哥說前端