同时发送多个请求,得到返回数据最快的那个接口的数据。axios.all,promise.all,promise.race

2 篇文章 0 订阅
1 篇文章 0 订阅

记录问题。
同时发多个请求,只保留返回数据最快的那个接口的数据。第一个想法就是axios.all并发请求,but,这样只是同时发送了多个请求,得到的只能是一个装着每个请求的数据。

这是我模拟的服务器接口部分代码

router.get("/one", (req, resp) => {
    let data = [{id: 1}];
    setTimeout(() => {
        resp.send(data)
    }, 1000)
});
router.get("/two", (req, resp) => {
    let data = [{id: 2}];
    setTimeout(() => {
        resp.send(data)
    }, 2000)
});
router.get("/three", (req, resp) => {
    console.log("33333");
    let data = [{id: 3}];
    setTimeout(() => {
        resp.send(data)
    }, 500)
});

axios.all

this.$axios.all([
        this.$axios.get("api/one"),
        this.$axios.get("api/two"),
        this.$axios.get("api/three")
      ]).then(data=>{
        console.log(data)
      });

得到的
在这里插入图片描述
可以看到我服务端返回数据都是设了setTimeout的,但其实返回的顺序只是和我请求数组的顺序是一样的。

后面想到promise.race,然后大概就是这样。

Promise.race([
        this.$axios.get("api/one"),
        this.$axios.get("api/two"),
        this.$axios.get("api/three")
      ]).then(data => {
        console.log(data);
      });

意料之中返回的就是这个样子滴
在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值