赞
踩
前端 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形式。
有没有办法解决这个问题?谢谢。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。