当前位置：网站首页>Easy to use nprogress progress bar

Easy to use nprogress progress bar

2022-04-23 20:31:00 【Different 213】

First step ： install `NProgress`

$ npm install --save nprogress

The second step ： stay `main.js` Import in file `NProgress` The package corresponds to JS and CSS

//  Import  NProgress  The package corresponds to JS and CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

The third step ： Use in interceptor `NProgress.start()` and `NProgress.done()`

// axios Request to intercept 
//  stay  request  In the interceptor , Show the progress bar  NProgress.start()
axios.interceptors.request.use(config => {
    
  // console.log(config)
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  //  In the end must  return config
  return config
})
//  stay  response  In the interceptor , Hide progress bar  NProgress.done()
axios.interceptors.response.use(config => {
    
  // console.log(config)
  NProgress.done()
  //  In the end must  return config
  return config
})