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