通过nprogress添加进度条效果

原创于 2021-03-08 09:10:49 发布 · 141 阅读

CC 4.0 BY-SA版权

这篇博客介绍了如何在前端项目中结合NProgress插件和Axios库，实现在HTTP请求期间显示进度条的效果。通过在Axios的request和response拦截器中调用NProgress的start()和done()方法，可以实现请求开始时显示进度条，请求结束时关闭进度条，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先引入nprogress插件

1.加载nprogress包

//导入nprogress 包对应的js,css
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

2.在axios request请求中使用start（）函数来开启进度条

//挂载请求拦截器
//在request拦截器中，展示进度条NProgress.start()
axios.interceptors.request.use(function (config) {
  NProgress.start();
  config.headers.Authorization = sessionStorage.getItem('token')
  return config;
})

3.在axios response请求中使用start（）函数来关闭进度条

//在response拦截器中，隐藏进度条NProgress.done()
axios.interceptors.response.use(config=>{
  NProgress.done();
  return config
})