前言
- 進度條的下載
- 進度條的引入
- 進度條的使用
1.進度條的下載
npm install nprogress -S
2.進度條的引入
在axios攔截器中匯入進度條插件，并引入css樣式，
import axios from 'axios'
//匯入進度條插件
import NProgress from 'nprogress'
//匯入css樣式
import 'nprogress/nprogress.css'
3.效果的實作
- 在請求攔截器中開啟進度條，通過
start()方法， - 在回應攔截器中關閉進度條，通過
done()方法，
//創建axios實體
let Server = axios.create({
baseURL: "",//初始化路徑
timeout: 3000 //延時時間
})
//請求攔截器
Server.interceptors.request.use(config => {
//開啟進度條
NProgress.start()
return config
})
//回應攔截器
Server.interceptors.response.use(response => {
//關閉進度條
NProgress.done()
return response
})
// 匯出axios實體
export default Server
進度條就完成了
總結
初出茅廬，請多多指教，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/232484.html
標籤：其他