Vue.js中发起新请求时取消之前的axios请求

核心思路是利用Axios的CancelToken机制，在发起新请求前主动取消未完成的旧请求，避免请求堆积导致的问题。以下是具体实现步骤：

1. 组件中新增请求取消相关变量 #

在Vue组件的data里添加存储取消函数的变量：

data() {
  return {
    forms: { name: '' },
    options: [],
    errorNya: {},
    loading2: false,
    disableButton: false,
    cancelRequest: null // 用于存储取消请求的函数
  }
}

2. 修改输入监听函数，实现请求取消逻辑 #

重写inputData函数，每次发起新请求前先终止旧请求：

inputData() {
  // 取消未完成的旧请求
  if (this.cancelRequest) {
    this.cancelRequest('新请求触发，取消旧请求');
  }

  this.loading2 = true;
  // 创建新的取消令牌
  const cancelSource = axios.CancelToken.source();
  this.cancelRequest = cancelSource.cancel;

  axios.get(`Url/GetUser/${this.forms.name}`, {
    cancelToken: cancelSource.token // 将令牌绑定到当前请求
  }).then((response) => {
    if (response.data.error) {
      this.errorNya = response.data;
    } else {
      this.errorNya.username = "";
      this.options = response.data;
      this.disableButton = true;
    }
    this.loading2 = false;
  }).catch((error) => {
    // 捕获取消请求的错误，避免控制台报错
    if (axios.isCancel(error)) {
      console.log('请求已取消:', error.message);
    } else {
      // 处理其他请求错误
      this.errorNya = { username: '请求失败，请重试' };
      this.loading2 = false;
    }
  });
}

3. 修正HTML中datalist的关联问题 #

原代码中input的list属性值是getname，但datalist的id是getInput，导致下拉列表无法关联，需修正为一致：

<input 
  type="text" 
  class="form-control" 
  placeholder="Search Name"  
  v-model="forms.name" 
  list="getname"  
  @input="inputData()" 
  required
> 
<datalist id="getname"> 
  <option v-for="option in options" :value="option">{{option}}</option> 
</datalist>

关键说明 #

• 每次输入触发请求时，先通过之前存储的cancelRequest函数终止旧请求，再创建新的取消令牌绑定到新请求。
• 捕获取消请求的错误，避免控制台出现不必要的报错信息。
• 确保input的list属性与datalist的id一致，才能正常显示下拉选项。

内容的提问来源于stack exchange，提问作者Saad