本文主要是介绍Vue nprogress插件进度条的使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
安装
cnpm install --save nprogress
去package.json文件查看是否安装成功
使用
项目中只要有请求,即可使用。
在请求拦截器中使用
///对于axios进行二次封装
import axios from "axios";
//引入进度条
import nProgress from "nprogress";
//start:进度条开始;done:进度条结束
//引入进度条的样式
import "nprogress/nprogress.css"//1:利用axios对象的方法create:去创建一个axios实例
//2:request就是axios,只不过稍微配置一下
const requests = axios.create({//配置对象//基础路径,发请求时,路径当中会出现apibaseURL:"/api",timeout:5000,
});//请求拦截器:在发请求之前,请求拦截器可以检测到,可以再请求之前做一些事情
requests.interceptors.request.use((config)=>{//config:配置对象,对象里面有一个属性很重要,header请求头//进度条开始动nProgress.start();return config;
});//响应拦截器
requests.interceptors.response.use((res)=>{//成功的回调函数:服务器响应数据回来以后,响应拦截器可以检测到,可以以做一些事情//进度条结束nProgress.done();return res.data;
},(error)=>{return Promise.reject(new Error('faile'));
});//对外暴露
export default requests;
修改进度条样式
安装后,修改代码位置
这篇关于Vue nprogress插件进度条的使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!