进度条 nprogress
安装依赖 cnpm install --save nprogress
1 import axios from "axios"; 2 3 // 引入进度条 4 import nprogress from 'nprogress'; 5 // 引入进度条css样式 6 import "nprogress/nprogress.css"; 7 // 请求拦截器start()开始,响应拦截器done()结束 8 9 // 利用axios对象的create方法,去创建一个axios实例 10 // request就是axios,只不过稍微配置了一下 11 const requests = axios.create({ 12 // 配置对象 13 // 基础路径,在发请求时,路径当中会出现api 14 baseURL: '/api', 15 // 请求超时的时间5s 16 timeout: 5000, 17 }) 18 // 请求拦截器,在发请求前,请求拦截器可以检测到,可以在请求发出去之前做一些事 19 requests.interceptors.request.use((config) => { 20 nprogress.start(); 21 return config 22 }) 23 // 响应拦截器 24 requests.interceptors.response.use((res) => { 25 // 响应成功的回调函数 26 nprogress.done(); 27 return res.data 28 }, (error) => { 29 // 响应失败的回调函数 30 return Promise.reject(new Error('faile')); 31 }); 32 export default requests