输入框连续请求中取消上次请请求

合集 - 必(54)

1.uniapp+vue3配置环境变量2023-11-30 2.uniapp关于uni.getUserProfile的使用2023-11-30 3.uniapp有意思的api之openSetting2023-12-02 4.处理flex布局2023-12-02 5.uniapp登录板块封装(旧接口getUserInfo)2023-12-03 6.uniapp获取用户信息2023-12-04 7.在项目中使用UEditor碰到的几个问题2023-12-04 8.一维数组转二位数组2023-12-10 9.如果win报错无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本2023-12-11 10.win系统执行脚本报错策略更改无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本2023-12-12 11.uniapp去除button的边框2024-01-10 12.uniapp中OnShow获取缓存2024-01-10 13.之前使用抖音的担保支付，后俩转换成通用的交易方式2024-01-11 14.js图片懒加载，在不做分页的情况下的解决方案2024-01-12 15.width:100%与width:auto区别2024-01-15 16.vue中render函数和h函数2024-01-15 17.leetcode1047字符串反复去重（栈）2024-01-15 18.由于<textarea>在某些平台上会创建一个原生控件，这可能会导致层级问题，尤其是在安卓设备上。在uni-app中，对于这种情况，通常推荐的解决方案是使用<cover-view>组件来覆盖原生组件，但是这种做法通常用于覆盖地图、视频等原生组件，而不是<textarea>2024-01-21 19.记录一次uniapp使用scrollview2024-01-22 20.微前端(矩阵项目)代码将单个文件合并到指定分支2024-01-22 21.js不同类型比较2024-01-31 22.登录后继续浏览之前的页面2024-02-01 23.css2024-02-02 24.sse2024-02-18 25.数组扁平化2024-02-19 26.DOMRect对象2024-02-20 27.前端三大系列图解释2024-02-20 28.js中关于return和if条件处理2024-02-20 29.js文字处理两端展示中间省略号2024-02-20 30.[popover, select] el-popover内有select的时候在选择后会自动关闭2024-02-20 31.说一下flex的属性2024-02-26 32.vue3中404路由匹配规则2024-02-26 33.shape-outside2024-02-27 34.createRange表示文档中的一个范围——用于js判断文字添加省略号情况2024-02-28 35.uniapp清除指定key缓存2024-03-07 36.vue3+uniapp关于button的open-type无法生效2024-03-11 37.uniapp+vue3 使用list触底+下拉2024-03-11 38.diff算法vue2024-03-12 39.动态修改manifest.json2024-03-18 40.记录一下大小写导致的问题2024-03-20 41.小程序真机报错errMsg: “hideLoading:fail:toast can‘t be found“ ？2024-03-25 42.vscode开发uniapp配置12024-03-25 43.渐变颜色css设置2024-03-29 44.微信小程序关于小说类使用官方阅读器2024-03-29 45.一个简单的伪类选择器2024-03-29 46.iframe 高度设置为0时还有占位_iframe占位2024-03-29 47.git push所有分支到远程仓库2024-04-03

48.输入框连续请求中取消上次请请求2024-04-12

49.VS Code侧边栏的“资源管理器”丢了2024-04-12 50.css样式相关的惊艳的属性2024-04-12 51.千分位分隔函数2024-04-18 52.uniapp实现多行文本溢出超过指定行数展开收起2024-05-16 53.前端如何接收流式数据2024-07-22 54.perspective和transform系列属性2024-08-27

我先输入的 1，已经发送请求了，紧接着输入了 2，3，123，如果在我输入最后一次 123 的时候，我第一次输入的 1 还没有请求成功，那请求 query 为 1 的这个接口将会覆盖 query 为 123123 的搜索结果，因为当 1 成功的时候会将最后一次请求的结果覆盖掉，当然这个概率很小很小，现在就这个bug，说一下你的解决思路吧！

点击查看代码

let currentAbortController = null;
    function fetchData(query) {
      // 取消上一次未完成的请求
      if (currentAbortController) {
        currentAbortController.abort();
      }

      // 创建新的 AbortController
      currentAbortController = new AbortController();

      return fetch(`/api/search?q=${query}`, {
        signal: currentAbortController.signal
      })
      .then(response => response.json())
      .then(data => {
        // 处理请求成功的数据
        updateDropdownList(data);
      })
      .catch(error => {
        // 只有在请求未被取消的情况下处理错误
        if (!error.name === 'AbortError') {
          handleError(error);
        }
      });
    }