nprogress进度条的使用

nprogress进度条的使用

---

一、安装所需的包

在项目文件打开终端

npm i nprogress --save

二、使用步骤

1.引入

在axios二次封装的文件下导入

代码如下（示例）：

// 导入nprogress
import nprogress from 'nprogress'
// 引入进度条样式
import 'nprogress/nprogress.css'

2.使用

在请求拦截器使进度条开始动

代码如下（示例）：

 // 进度条开始动
  nprogress.start(),

在响应拦截器成功下使进度条结束：

 // 进度条结束
 nprogress.done(),

二次封装代码如下:

这里侧重于写在什么位置！参考axios的二次封装可以了解：

https://blog.csdn.net/The_more_more/article/details/124206639

import axios from 'axios'
import { Message } from 'element-ui'

// 引入进度条
import nprogress from 'nprogress'

//  引入进度条的样式
import 'nprogress/nprogress.css'

const service = axios.create({
  baseURL: 'http://127.0.0.1:3030',
  timeout: 5000,
  withCredentials: false // 表示跨域请求时是否需要使用凭证
})

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 进度条开始动
    nprogress.start()
    return config
  },
  (error) => {
    console.log(error)
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 进度条结束
    nprogress.done()
    return response.data
  },
  (error) => {
    console.log('err' + error)
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

3.修改样式

如果想修改进度条的样式，我们需要找到nprogress.css文件，找到#nprogress .bar的选择器，去修改喜欢的颜色

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了nprogress的使用，详细内容可以参考：https://madewith.cn/23