添加进度条

最新推荐文章于 2022-05-20 18:57:57 发布

芋圆味糖罐

最新推荐文章于 2022-05-20 18:57:57 发布

阅读量173

点赞数

文章标签：前端 javascript http

本文链接：https://blog.csdn.net/m0_62351775/article/details/123118252

版权

给项目添加进度条效果，先打开项目控制台，打开依赖，安装nprogress
打开main.js，编写如下代码
下载依赖

cnpm i nprogress --save

编写如下代码main.js

//导入进度条插件
import NProgress from 'nprogress'
//导入进度条样式
import 'nprogress/nprogress.css'
.....
//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {
  //当进入request拦截器，表示发送了请求，我们就开启进度条
  NProgress.start()
  //为请求头对象，添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token")
  //必须返回config
  return config
})
//在response拦截器中，隐藏进度条
axios.interceptors.response.use(config =>{
  //当进入response拦截器，表示请求已经结束，我们就结束进度条
  NProgress.done()
  return config
})