当前位置:   article > 正文

用 axios 对同一个 URL 同时发起多个请求(不同参数),返回的 data 错乱_前端一下调3个接口 数据返回每次不一样

前端一下调3个接口 数据返回每次不一样

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

参数格式如下:

  1. let data = {
  2. 'username': 'admin',
  3. 'password': 'admin',
  4. 'methodName': 'method1',
  5. 'boId': 'bo1',
  6. 'returnType': 'json',
  7. 'parameters': 'param1'
  8. };

usernamepasswordreturnType 是固定的,methodNameboIdparameters 会随着不同的 API 而变化。

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

  1. axios.get(apiUrl, {params: data1}).then((response) => {
  2. myData1 = response.data
  3. })
  4. axios.get(apiUrl, {params: data2}).then((response) => {
  5. myData2 = response.data
  6. })
  7. axios.get(apiUrl, {params: data3}).then((response) => {
  8. myData3 = response.data
  9. })

期望结果:

  1. myData1: {'data': 'A'}
  2. myData2: {'data': 'B'}
  3. myData3: {'data': 'C'}

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

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

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

  1. // response 12 返回相同值
  2. myData1: {'data': 'A'}
  3. myData2: {'data': 'A'}
  4. myData3: {'data': 'C'}

总结一下,我的期望结果是这样的:

参数(params: data)实际请求URL (Request URL)响应(Response)返回值 (myData)
data1Request URL1Response1myData1
data2Request URL2Response2myData2
data3Request URL3Response3myData3

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

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

参数(params: data)实际请求URL (Request URL)响应(Response)返回值 (myData)
data1Request URL1Response2myData2
data2Request URL2Response1myData1
data3Request URL3Response3myData3

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

参数(params: data)实际请求URL (Request URL)响应(Response)返回值 (myData)
data1Request URL1Response1myData1
data2Request URL2Response1myData1
data3Request URL3Response3myData3

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

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

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

 

 

 

 

 

 

 

 

 

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/运维做开发/article/detail/815123
推荐阅读
相关标签
  

闽ICP备14008679号