如何实现中断取消网络请求（搜索场景）

想必在开发中，大家都遇到一种情况，就是在输入框输入文字，当我们输入a，然后很快的输入b，这个时候，如果b这个请求响应的速度快，页面会先显示b响应的结果，然后之后a请求的响应回来，再覆盖掉b的响应结果，此时是我们不愿意被看到的。总的来说，就是如果发多个请求，服务器响应的顺序，不一定是发请求的顺序。所以我们需要做就是在发送请求的时候，把之前的请求都取消掉，只保留最后一次的请求。（感觉有点像防抖haha~）

  let controller;
  input.oninput = async () => {
    controller && controller.abort();//判断如果controller存在，则取消请求
    controller = new AbortController()//创建一个控制器（一个请求对应一个控制器）
    try {
      const list = await fetch(
        'http://localhost:8888/api/search?key=' + input.value, {
        signal: controller.signal //将请求和控制器进行关联
      }
      ).then((resp) => { resp.json() });
      // 此处可以写操作list的代码（展示数据）
    } catch (error) {
      console.log('aborted');
    }
  }

还有一种使用场景 代码如下（在axios的请求拦截器里面）

// http request 请求拦截器
service.interceptors.request.use(
  config => {
    console.log(config);
    const controller = new AbortController()
    config.signal = controller.signal

    // console.log(requestMap)
    //存储正在发送的请求 （防止一个请求没结束时，相同请求发送多次）
    //请求第一次发送存储
    if (!requestMap.has(config.url)) {
      requestMap.set(config.url, controller)
    } else { //如果请求已发送则拦截
      let cot = requestMap.get(config.url)
      cot.abort()
      requestMap.set(config.url, controller)
    }

    if (!config.donNotShowLoading) {
      showLoading()
    }
    config.headers = {
      'Content-Type': 'application/json',
      // 'x-token': userStore.token,
      // 'x-user-id': userStore.userInfo.ID,
      ...config.headers
    }
    return config
  },
  error => {
    closeLoading()
    ElMessage({
      showClose: true,
      message: error,
      type: 'error'
    })
    return error
  }
)