vue.js for循环异步请求,等所有请求返回了,再继续执行下一步请求

// urltemp是要发送请求的目标地址数组,长度等于发请求次数
let arr = [];
let that = this;
for (let i in urlTemp) {
    arr.push(
        new Promise(function(resolve, reject) {
        	// 跨域
            let realHealthyUrl = window.location.protocol + '//' + window.location.host + '//' + urlTemp[i].replace('http://', '') + '/xxxxx/health';
            axios
                .get(realHealthyUrl)
                .then(res => {
                    if (!res || !res.data || res.data.statusCode !== 'API-COMMON-INF-OK') {
                    console.log('接口调用失败')
                    } else {
                        resolve(res);
                    }
                })
                .catch(() => {
                console.log('网站无响应');
                });
        })
    );
}
Promise.all(arr).then(result => {
    this.dosomething();
});
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 中,可以使用 `async/await` 关键字和 `setTimeout` 函数来实现 `for` 循环中的延时请求。具体实现方法如下: 1. 在 Vue 组件中定义一个异步函数,用于发送请求等待一定的时间后再返回结果: ``` async function getDataWithDelay(delay) { return new Promise((resolve, reject) => { setTimeout(() => { axios.get('/api/data').then(response => { resolve(response.data); }).catch(error => { reject(error); }); }, delay); }); } ``` 在这个例子中,异步函数 `getDataWithDelay` 接受一个参数 `delay`,表示延时的时间。在函数内部,通过 `setTimeout` 函数来等待一定的时间后再发送请求,并将请求结果通过 `resolve` 函数返回。 2. 在 Vue 组件中定义一个异步函数,用于发送延时请求并输出结果: ``` async function requestData() { for (let i = 0; i < 10; i++) { const data = await getDataWithDelay(1000); console.log(data); } } ``` 在这个例子中,`requestData` 函数使用 `for` 循环发送 10 次延时请求,每次请求延时 1000 毫秒。使用 `await` 关键字等待异步函数的返回结果,避免了重复请求的问题,并且保证了每次请求的间隔时间。 3. 在 Vue 组件中调用 `requestData` 函数,开始发送延时请求: ``` requestData(); ``` 在这个例子中,调用 `requestData` 函数,开始发送延时请求。在 Vue 组件中,可以在 `mounted` 钩子函数中调用该函数,实现组件渲染后自动发送请求的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值