loading 状态在后台列表页大家是怎么处理的呢？

Question

描述：众所周知，后台列表页一般会有筛选块(包含日期筛选框、关键词输入框、搜索按钮)、el-table 表格块、el-pagination 分页块，当获取列表接口数据时，loading 状态会做些什么处理呢？

解决方案 ①：新请求需等待旧请求

方式：取列表接口数据时，设置 isLoading="true" ， v-loading="isLoading" 应用在表格块、分页块增加 loading 遮罩 不让显示，给搜索按钮加上 :loading="isLoading" 菊花样式不让再次搜索

缺点：如果获取接口数据的等待时间过长，比如筛选日期范围过大导致过慢，用户就想把日期范围缩小点加快数据的查看，这时候就只能等待了

解决方案 ②：取消旧请求直接发送新请求

方式：参考了神策网站里的事件分析接口，没有搜索按钮，可以随时改变事件类型、日期范围，一旦一个参数改变就发送新请求，丢弃掉旧请求 xhr.abort() ，同时再发送一个取消请求告诉后端不用去处理旧的请求了请求 network 截图

缺点：①前端需要额外处理下；②适用于本身请求接口就是耗时长的，需要耐心等待，不想用户那么频繁请求

---

那么，大佬们一般是怎么处理的呢？

Answer 1

用方案1，loading只遮盖表格数据，当用户重新搜索的时候不取消请求，发起新的请求。
要注意，旧接口可能比新接口返回的慢，不要覆盖新接口的结果。
虽然前端可以用xhr.abort取消请求，但后端还是会继续处理这个请求，除非在关键点判断前端是否取消了请求，如果取消就不继续处理。