只要发送请求,就有进度显示。服务器返回成功后,进度条消失~(与服务器数据显示无关)
1、安装依赖包 npm nprogress -S
2、引入nprogress 插件 及其样式
//引入进度条
import nprogress from "nprogress";
//引入进度条样式
import '../../node_modules/nprogress/nprogress.css'
3、在全局拦截器中使用,
请求拦截器用 nprogress.start()
//请求拦截器
requests.interceptors.request.use((config)=>{
//进度条开始动
nprogress.start()
return config
})
请求拦截器用 nprogress.done()
//响应拦截器
requests.interceptors.response.use((res)=>{
//服务器返回2xx状态码 时,执行的函数
//对响应数据做点什么
//进度条结束
nprogress.done()
},(error)=>{
return Promise.reject(error)
})
完成~加油!