使用axios.all运行多个请求时，spread中多个返回参数有概率接收到完全相同的数据。这是什么情况？

Question

我刚使用vue做一个网站，其中有“热点文章”和“推荐文章”列表，于是我把它们写成一个组件，其中有两个同时运行的axios请求，分别获得热点列表和推荐列表数据。但我发现这两个数据总是混淆或相互覆盖。于是用了axios.all方法。

methods: {
    // 热点
    getHotlist: function(columnId, number) {
      return this.$axios({
        method: 'post',
        url: 'http://localhost:8090/articles/hotlist',
        data: {
          columnId: columnId,
          number: number
        },
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;'
        }
      })
    },
    // 推荐
    getRecommendlist: function(number) {
      return this.$axios({
        method: 'post',
        url: 'http://localhost:8090/articles/recommendlist',
        data: {
          number: number
        },
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;'
        }
      })
    },
    getData: function() {
      let that = this
      this.$axios.all([that.getHotlist(that.columnId, 4), that.getRecommendlist(4)])
        .then(
          that.$axios.spread(function(hotdata, recdata) {
            console.log('所有请求完成')
            console.log('请求1结果', hotdata)
            console.log('请求2结果', recdata)
            } else {
              that.$message.error(recdata.data.status.msg)
            }
          }))
    }
  },mounted: function() {
    this.getData()
  }

我按网上的写法写的。但是有一定概率spread中的参数hotdata和recdata是一样的。应该是覆盖了，混乱了。hotdata取成返回的recdata的数据了，亦或相反。
我试着把两个请求分开写入两个独立的组件，但只要在同一页面出现，同时运行，就有概率会乱。组件间的axios请求也会乱。
以前用jquery时也有多个ajax同时请求的情况，但也没乱过呀。
以前就没听说过不同的请求间回调获得的数据还会乱……这种情况常见不？如何解决呢？

Answer 1

问题是axios.all可能返回的两个数据是同一个，不是因为axios.all本身问题，而是因为请求是异步的，而两个请求可能同时完成导致回调中的两个数据是同一个。解决方法是将请求设置为同步请求，或者通过使用setTimeout等方法控制请求的完成顺序。