nprogress进度条插件的使用
发送请求时,浏览器展示进度条
安装插件
cnpm install --save nprogress@0.2
在封装axios的地方使用
//对于axios进行二次封测 import axios from 'axios'; import nProgress from 'nprogress'; //引入进度条样式 import 'nProgress/nprogress.css'; //start()代表进度条开始 done()代表进度条结束 //1.利用axios读写的方法create,创建一个axios实例 const request = axios.create({ //设置基础路径,发送请求时路径自动拼接上api,如http://xxx:8080/api/xxx baseURL: "/api", timeout: '5000' }); //请求拦截器:在发请求前,请求拦截器可以检测到,可以在请求发出去之前做一些事情 request.interceptors.request.use((config)=>{ //config:配置对象,对象里面有个属性,header请求头 //进度条开始 nProgress.start() return config; }); //响应拦截器 request.interceptors.response.use((res)=>{ //服务器成功的回调函数,服务器响应数据回来以后,响应拦截器可以检测到 //进度条结束 nProgress.done() return res.data },(error)=>{ //服务器响应失败的回调函数 return Promise.reject(new Error('fail'));//终止promise链 }) //对外暴露 export default request;