美文网首页
vue axios同时调用多个接口后处理数据,axios.all

vue axios同时调用多个接口后处理数据,axios.all

作者: 源大侠 | 来源:发表于2023-04-11 18:04 被阅读0次

    问题

    当我们需要调用多个接口,然后在这些接口都调用完成后进行某些操作,以及循环调用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; });
    

    相关文章

      网友评论

          本文标题:vue axios同时调用多个接口后处理数据,axios.all

          本文链接:https://www.haomeiwen.com/subject/ixogddtx.html