辉太郎看前端(axios拦截器中使用进度条)

前言

1. 进度条的下载
2. 进度条的引入
3. 进度条的使用

1.进度条的下载

npm install nprogress -S

2.进度条的引入

在axios拦截器中导入进度条插件，并引入css样式。

import axios from 'axios'
//导入进度条插件
import NProgress from 'nprogress'
//导入css样式
import 'nprogress/nprogress.css'

3.效果的实现

1. 在请求拦截器中开启进度条，通过start()方法。
2. 在响应拦截器中关闭进度条，通过done()方法。

//创建axios实例
let Server = axios.create({
     
    baseURL: "",//初始化路径
    timeout: 3000  //延时时间
})
//请求拦截器
Server.interceptors.request.use(config => {
     
    //开启进度条
    NProgress.start()    
    
    return config
})
//响应拦截器
Server.interceptors.response.use(response => {
     
    //关闭进度条
    NProgress.done()
    return response
})
// 导出axios实例
export default Server

进度条就完成了

总结

初出茅庐，请多多指教。