为每个ajax请求添加一个进度条

package.json

@@ -13,6 +13,7 @@
     "echarts": "^4.8.0",
     "element-ui": "^2.13.2",
     "lodash": "^4.17.15",
+    "nprogress": "^0.2.0",
     "vue": "^2.6.11",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.2.0",

src/main.js

@@ -14,17 +14,25 @@ import 'quill/dist/quill.snow.css' // for snow theme
 import 'quill/dist/quill.bubble.css' // for bubble theme
 import timeline from 'element-ui/lib/timeline'
 import timelineItem from 'element-ui/lib/timeline-item'
+// 进度条
+import NProgres from 'nprogress'
+import 'nprogress/nprogress.css'
 
 Vue.use(timeline)
 Vue.use(timelineItem)
 Vue.use(vueQuillEditor)
 Vue.component('table-tree', tableTree)
 axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
-// 为每个请求头挂一个 token
+// 为每个ajax请求头挂一个 token  并加载进度条
 axios.interceptors.request.use(config => {
+  NProgres.start()
   config.headers.Authorization = sessionStorage.getItem('token')
   return config
 })
+axios.interceptors.response.use(response => {
+  NProgres.done()
+  return response
+})
 
 Vue.filter('dataFormat', (time) => {
   const dt = (new Date(time))