Java教程

插件——nprogress进度条

本文主要是介绍插件——nprogress进度条,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

nprogress进度条插件

  • 需求:打开一个页面时,往往会伴随一些请求,并且会在页面上方出现进度条。

  • 原理:在我们发起请求的时候开启进度条,在请求成功后关闭进度条

  • 实现:所以只需要在request.js中进行配置,在页面加载时发起了一个请求,此时页面上方出现蓝色进度条,收到响应数据后关闭进度条。在拦截器加。

1、安装

npm install nprogress --save

2、对应的request.js设置

  • starte() 进度条开始。donee()进度条结束

  • 可以通过修改nprogress.css文件的background来修改进度条颜色。

import axios from "axios";
//引入进度条
import nprogress from 'nprogress';
//引入进度条样式
import "nprogress/nprogress.css";
//1、对axios二次封装
const requests = axios.create({
    //基础路径,requests发出的请求在端口号后面会跟改baseURl
    baseURL:'/api',
    timeout: 5000,
})
//2、配置请求拦截器
requests.interceptors.request.use(config => {
    //config内主要是对请求头Header配置
    //比如添加token

    //开启进度条
    nprogress.start();
    return config;

})
//3、配置相应拦截器
requests.interceptors.response.use((res) => {
    //成功的回调函数

    //响应成功,关闭进度条
    nprogress.done()
    return  res.data;

},(error) => {
    //失败的回调函数
    console.log("响应失败"+error)
    return Promise.reject(new Error('fail'))
})
//4、对外暴露
export default requests;
这篇关于插件——nprogress进度条的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!