当前位置: 首页>后端>正文

vue axios同时调用多个接口后处理数据,axios.all调用动态循环请求

问题

当我们需要调用多个接口,然后在这些接口都调用完成后进行某些操作,以及循环调用n个接口时,axios.all能帮我们很好的实现这个业务需求

解决

先看看axios官网对axios.all的用法:

简单来写就是:

vue axios同时调用多个接口后处理数据,axios.all调用动态循环请求,第1张

然后介绍一下实际业务中的使用方法:

//  业务模拟:现在需要调用一个接口多次,当碰到接口返回值为'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; });

https://www.xamrdz.com/backend/3kv1920642.html

相关文章: