专业做网站设计,wordpress 知更鸟,seo谷歌,仅对wordpress自带主题有效打开一个页面时#xff0c;往往会伴随一些请求#xff0c;并且会在页面上方出现进度条。它的原理时#xff0c;在我们发起请求的时候开启进度条#xff0c;在请求成功后关闭进度条#xff0c;所以只需要在request.js中进行配置。 如下图所示#xff0c;我们页面加载时发起…打开一个页面时往往会伴随一些请求并且会在页面上方出现进度条。它的原理时在我们发起请求的时候开启进度条在请求成功后关闭进度条所以只需要在request.js中进行配置。 如下图所示我们页面加载时发起了一个请求此时页面上方出现蓝色进度条 1.安装 2.使用
import axios from axios;
//引入进度条
import nprogress from nprogress;
//引入进度条样式
import nprogress/nprogress.css
//1、对axios进行二次封装
//利用axios对象的方法creach ,创建一个axios实例
const requests axios.create({//基础路径requests发出的请求在端口号后面会跟改baseURlbaseURL: /api,timeout: 5000,
})
//2、配置请求拦截器
requests.interceptors.request.use(config {//config内主要是对请求头Header配置//进度条开始nprogress.start()return config;})
//3、配置相应拦截器
requests.interceptors.response.use((res) {//成功的回调函数//进度条结束nprogress.done()return res.data;
}, (error) {//失败的回调函数console.log(响应失败 error)return Promise.reject(new Error(faile))
})
//4、对外暴露
export default requests;3.可以通过修改nprogress.css文件的background来修改进度条颜色。
#nprogress .bar {background: rgb(47, 221, 34);position: fixed;z-index: 1031;top: 0;left: 0;width: 100%;height: 2px;
}
