同時發送多個請求，得到傳回資料最快的那個接口的資料。axios.all，promise.all，promise.race

記錄問題。

同時發多個請求，隻保留傳回資料最快的那個接口的資料。第一個想法就是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);
      });
           

意料之中傳回的就是這個樣子滴