有多个请求怎么处理showLoading的弹框提示 用js代码实现
时间: 2024-04-30 18:24:41 浏览: 11
可以使用一个计数器来记录当前有多少个请求正在进行中。每当发起一个新的请求时,计数器加1;每当一个请求结束时,计数器减1。当计数器不为0时,显示loading弹框提示;当计数器为0时,隐藏loading弹框提示。
以下是一个简单的实现示例:
```javascript
let requestCount = 0;
function showLoading() {
// 显示loading弹框提示的代码
}
function hideLoading() {
// 隐藏loading弹框提示的代码
}
function sendRequest() {
// 发送请求之前调用showLoading
requestCount++;
if (requestCount === 1) {
showLoading();
}
// 发送请求的代码
// ...
// 请求结束之后调用hideLoading
requestCount--;
if (requestCount === 0) {
hideLoading();
}
}
```
在实际使用中,可以将`sendRequest`函数封装成一个工具函数,用于发送所有的请求,并在其中加入计数器的逻辑。
相关问题
axios 同时多个请求_Vue 封装axios实现多个请求合并为一次 loading
可以使用axios的拦截器来实现多个请求合并为一次loading的效果。具体实现步骤如下:
1. 在封装axios的文件中,定义一个计数器,用来记录当前页面需要发送的请求个数。
2. 在axios的请求拦截器中,将计数器加1。
3. 在axios的响应拦截器中,将计数器减1。
4. 在响应拦截器中判断计数器是否为0,如果为0则表示当前页面所有请求都已经完成,可以隐藏loading了。
下面是代码示例:
```
import axios from 'axios'
import { Loading } from 'element-ui'
let loadingInstance = null // loading实例
let reqCount = 0 // 计数器
function showLoading () {
if (reqCount === 0) {
loadingInstance = Loading.service({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
}
reqCount++
}
function hideLoading () {
reqCount--
if (reqCount === 0) {
loadingInstance.close()
}
}
const service = axios.create({
baseURL: process.env.BASE_API,
timeout: 5000
})
service.interceptors.request.use(
config => {
showLoading()
return config
},
error => {
hideLoading()
return Promise.reject(error)
}
)
service.interceptors.response.use(
response => {
hideLoading()
return response.data
},
error => {
hideLoading()
return Promise.reject(error)
}
)
export default service
```
在以上代码中,我们使用了element-ui的loading组件来实现loading效果。在请求拦截器中调用showLoading方法显示loading,在响应拦截器中调用hideLoading方法隐藏loading。计数器reqCount用来记录当前页面需要发送的请求个数,当计数器为0时,说明所有请求都已经完成,可以隐藏loading了。
uniapp提示弹框
在uniapp中,可以使用不同的方法来显示提示弹框。其中,可以在执行数据查询、页面数据渲染等过程中弹出提示,也可以在执行增、删、改、查等提交成功后弹出提示。
一种常见的方法是使用uni.showLoading()方法来显示加载提示弹框。例如,在前端数据请求时,可以使用以下代码显示加载提示弹框:
```
uni.showLoading({
title: '加载中...'
});
```
当数据从后端接口返回后,可以使用uni.hideLoading()方法来关闭提示弹框:
```
uni.hideLoading();
```
另一种方法是使用uni.showToast()方法来显示成功提示弹框。例如,可以使用以下代码弹出成功提示弹框:
```
uni.showToast({
title: '成功提示',
icon: 'success',
duration: 2000
});
```
这样的提示弹框会在页面上显示2秒钟,并且会有一个成功的图标。
此外,还可以使用全局直接调用的方式来显示通用提示弹窗。例如,可以使用this.$confirmation()方法来调用通用提示弹窗,并且可以通过回调函数来处理确认或取消的操作。这个方法可以利用Promise封装,以便在需要的时候进行二次封装。
总之,在uniapp中,可以根据需要选择合适的方法来显示提示弹框,并根据具体的业务场景进行相应的调用和处理。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)