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

可以借助第三方库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)
        })
    })}

 

效果图如下所示： 

 

参考资料：

1. https://blog.csdn.net/weixin_43788115/article/details/107560936