使用NProgress给页面上方添加进度条

朱雀 2022-12-11 07:51 244阅读 0赞

可以借助第三方库NProgress来实现调用接口请求时候，获取数据的动态过程。适用于Vue、React等框架。下面以React举例：

1. 首先需要使用npm进行安装

> npm install nprogress

2. 在react文件中引入包和css样式

> import NProgress from 'nprogress'
> 
> import 'nprogress/nprogress.css'

注意：这里css样式必须引入，不然没有效果

3. 在请求之前开启，请求接受之后关闭滚动条

> NProgress.start()
> 
> NProgress.done()

例如下面一段接口代码，在执行异步ajax请求之前，我们调用了 NProgress.start()。当返回response之后调用NProgress.done()

export default function ajax(url, data = {}, method = 'GET') {
        return new Promise(function (resolve, reject) {
            let promise
            NProgress.start()
            // 执行异步 ajax 请求
            if (method === 'GET') {
                promise = axios.get(url, {params: data}) // params 配置指定的是 query 参数
            } else {
                promise = axios.post(url, data)
            }
    
            promise.then(response => {
                // 如果成功了, 调用 resolve(response.data)
                resolve(response.data)
                NProgress.done()
            }).catch(error => { // 对所有 ajax 请求出错做统一处理, 外层就不用再处理错误了
                // 如果失败了,  示请求后台出错
                message.error('请求错误: ' + error.message)
            })
        })}

效果图如下所示：

![20200929135818140.png][]

参考资料：

1. [https://blog.csdn.net/weixin\_43788115/article/details/107560936][https_blog.csdn.net_weixin_43788115_article_details_107560936]

[20200929135818140.png]: /images/20221123/3a30a0989dce4ca6b6806912ba529903.png
[https_blog.csdn.net_weixin_43788115_article_details_107560936]: https://blog.csdn.net/weixin_43788115/article/details/107560936