多次请求同一接口，接口响应时间不一导致数据覆盖

Question

有两个下拉框，业务类型和市场，不同的业务类型获取不同的市场名称。
同一接口，id不同，多次切换后发现市场下拉框数据出现混乱，调试发现是先请求的接口数据后返回，将最新的数据覆盖了。
目前想的是，让后台将传入的id再次返回给前端，前端进行id比对，请问还有什么好的方案么？

Answer 1

其实用你的方案就可行了，甚至不用改后端接口，可以直接在本地发送请求时缓存这个id，拿到回调后对比这个缓存id是否是最后记录即可
伪代码

onSelect(id) {
  this.id = id;
  axios.post('/xxx', {id}).then(result => {
    if (id === this.id){
      //赋值逻辑
    } 
  });
},

Answer 2

其实这个没必要想得太复杂吧，业务上看，两个下拉框的数据应该不会特别多，并且不需要经常改动。这类的基础数据，可以在页面初始化的时候先加载到客户端，在页面使用的时候直接使用本地保存的数据，不需要每次都去请求服务器呀。

Answer 3

这个是根据业务类型决定市场名称嘛，可以存个嵌套对象嗷

[
    {
      name: '业务类型1',
      children: [{ name: '市场名称1' }, { name: '市场名称2' }]
    }, {
      name: '业务类型2',
      children: [{ name: '市场名称3' }, { name: '市场名称4' }]
    }, {
      name: '业务类型3',
      children: [{ name: '市场名称5' }, { name: '市场名称6' }]
    }
]

大概这个样子，这样业务类型不管怎么切换，市场名称肯定都是对的，不存在覆盖的问题
而且这样单个页面只需加载一次，不用反复请求
js可以判断children的长度是不是0，是0就请求，不是就直接显示
html可以如果children的长度是0，显示加载中

Answer 4

维护个状态，在数据未返回之前不允许再次选择。
或者防抖节流，根据自己的需要设置条件

Answer 5

请求之前看上一次请求结束没，没结束的话，手动取消

Answer 6

有遇到过，不过我的数据量小，直接把所有的都查出来再按照前置条件去过滤

Answer 7

用async await，等第一次请求返回后再发出第二个请求

async function getData() {
  const data1= await fetch(1);
  const data2= await fetch(2);
}

Answer 8

1. 用async await。
2. 维护一个请求队列，哪一个先拿到值，就把其他请求都cancle掉。（axios是基于xhr实现的，xhr.abort()就是关闭请求的方法）