问题
当我们需要调用多个接口,然后在这些接口都调用完成后进行某些操作,以及循环调用n个接口时,axios.all能帮我们很好的实现这个业务需求
解决
先看看axios官网对axios.all的用法:
简单来写就是:
image.png然后介绍一下实际业务中的使用方法:
// 业务模拟:现在需要调用一个接口多次,当碰到接口返回值为'ok'的时候,停止调用
let idArr = [1, 2, 3];
let urlArr = idArr.map(element =>
axios.get('/api/test?query=' + element)
);
// console.log(urlArr)
let num = 0;
axios.all(urlArr)
.then(axios.spread((...arg) => {
// 请求现在都执行完成
Array.from([...arg]).forEach((element, index) => {
//这里可以查看每个请求的返回数据 console.log(element)
//通过num === 0判断是否是第一次进入if条件
if (element.data === 'ok' && num === 0) { num+=1;
console.log(1)
}
})
}));
promise.all业务模拟:多个form表单验证
Promise.all([
this.$refs.ruleForm.validate(),
this.$refs.supplierForm.validate()
]).then(() => {
console.log('全部验证成功')
}).catch(() => { console.log('error submit!!'); return false; });
网友评论