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

进度条就完成了

总结

初出茅庐,请多多指教。

原文地址:https://blog.csdn.net/m0_50512274/article/details/110918118

人已赞赏
JavaScript

HTML + JS 实现图片下载功能

2020-12-7 13:11:22

其它

Ubuntu下源码编译安装Node.js

2020-10-27 22:43:47

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索