vue中使用nprogress优化导航条和请求数据的时候进行加载中显示

以下内容仅供学习使用

  1. 先进行安装
    npm install --save nprogress
    或者
    yarn add nprogress
  2. 在你封装的request.js中使用
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

image

  1. 在axios.interceptors.request.use(config => {},请求开始的时候使用
    NProgress.start() //启动
    以下是自己当前例子使用到的代码
let loadingInstance = null
axios.interceptors.request.use(config => {
  NProgress.start() //启动
  // 显示loading状态
  loadingInstance = Loading.service({
    text: '数据加载中...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)', // 背景颜色
    duration: 1000, // 设置loading显示时间,单位为毫秒
    delay: 500 // 延迟500ms显示
  })
  //为请求头对象,添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token")
  return config
}, error => {
  // 隐藏loading状态
  loadingInstance.close()
  return Promise.reject(error)
}),
  1. 在 axios.interceptors.response.use(response => {}中使用
    NProgress.done() //关闭
  axios.interceptors.response.use(response => {
    // 隐藏loading状态
    loadingInstance.close()
    NProgress.done()  //关闭
    return response
  }, error => {
    // 隐藏loading状态
    loadingInstance.close()
    return Promise.reject(error)
  })
  1. 它默认显示为蓝色进度条,如果你想自定义进度条颜色,可在全局css中或在app.vue下写入自己自定义的css样式;
<style>
// 自定义进度条颜色
 #nprogress .bar {
     background: #F811B2 !important; //自定义颜色
  }
</style>
  1. 效果图,刷新之后就会出现蓝条啦!

image

  1. 效果图,加载数据

image

posted @ 2023-04-03 13:11  Amyel  阅读(26)  评论(0编辑  收藏  举报