用 axios 对同一个 URL 同时发起多个请求（不同参数），返回的 data 错乱

Question

前端 Vue，后端 Java。后端生成 API 供前端调用。
所有 API 的 URL 地址是同一个，只是对不同的 API 传递不同的参数。

参数格式如下：

let data = {
  'username': 'admin',
  'password': 'admin',
  'methodName': 'method1',
  'boId': 'bo1',
  'returnType': 'json',
  'parameters': 'param1'
};

username、password、returnType 是固定的，methodName、boId、parameters 会随着不同的 API 而变化。

前端用 axios 调用。当同时调用三个API时（URL 相同，params 不同），返回的数据会错乱。

axios.get(apiUrl, {params: data1}).then((response) => {
  myData1 = response.data
})

axios.get(apiUrl, {params: data2}).then((response) => {
  myData2 = response.data
})

axios.get(apiUrl, {params: data3}).then((response) => {
  myData3 = response.data
})

期望结果：

myData1: {'data': 'A'}
myData2: {'data': 'B'}
myData3: {'data': 'C'}

但实际结果是，有时候可以得到期望结果，有时候返回的数据却会错乱，比如 myData1 和 myData2 相互调包，chrome 查看 response 也是错乱的

// response 1、2 也相互调包
myData1: {'data': 'B'}
myData2: {'data': 'A'}
myData3: {'data': 'C'}

或者是 myData1 和 myData2 返回相同值：

// response 1、2 返回相同值
myData1: {'data': 'A'}
myData2: {'data': 'A'}
myData3: {'data': 'C'}

总结一下，我的期望结果是这样的：

参数(params: data)	实际请求URL (Request URL)	响应(Response)	返回值 (myData)
data1	Request URL1	Response1	myData1
data2	Request URL2	Response2	myData2
data3	Request URL3	Response3	myData3

但实际调用会经常发生以下两种错误情况：

一、其中两个API响应和返回值调包

参数(params: data)	实际请求URL (Request URL)	响应(Response)	返回值 (myData)
data1	Request URL1	Response2	myData2
data2	Request URL2	Response1	myData1
data3	Request URL3	Response3	myData3

二、其中两个API响应和返回值相同

参数(params: data)	实际请求URL (Request URL)	响应(Response)	返回值 (myData)
data1	Request URL1	Response1	myData1
data2	Request URL2	Response1	myData1
data3	Request URL3	Response3	myData3

但当以上3个API分别调用时，每次都可以返回正确结果。

试过 axios.all \ promise.all ，不行。

---

请问导致这种问题的原因是什么？前端还是后端的问题？
是不是同一个 URL 的原因？但后端是用一个现成的框架，只能用这种API形式。
有没有办法解决这个问题？谢谢。

Answer 1

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

Answer 2

个人认为不会出现这种错乱的问题
你可以看看控制台 - 网络 中这三个请求对应的响应

Answer 3

去控制台看看, 你的 data1 和 myData1 和 response1 是否能一一对应. 如果对应不上那就是后端问题

如果对应上了, 可能你以为给了后端的data1, 其实变成了data2, 就是你的传参问题了.

Answer 4

ajax是异步的，同时发三个请求等于同时开了3个线程，并不知道哪个ajax call先回来，所以这是正常现象， 你可以用param中的key和ajax call 回来的数据作对比，判断是哪个ajax call

Answer 5

如果你的表述没有问题的话，我觉得是后端的问题。

Answer 6

如果你表述没有问题的话，我也觉得是后端的问题。
你用的是全局（或上级作用域里）的变量去存储后端返回值，而且变量是固定的，无论哪一个最后回来，你的变量存储的值是不会变的。

Answer 7

我擦，我也遇到了，找了很久是后端的锅，并发请求，一定概率，不同接口，返回数据一样

Answer 8

2020年了，我也遇到了这个问题，试过封装组件隔离作用域、async await改异步为同步，还试过promise.all()，结果都是解决不了。
看了评论区后恍然大悟，打开去控制台才发现原来后端返回的数据就是错乱的，心累。

Answer 9

遇到相同问题，请问你们后台是怎么解决的。