js AbortController 实现中断接口请求

爱写代码的派大星2025-08-30 19:20

2025.08.29今天我学习了如何实现中断接口请求，效果如下：

代码如下：

复制代码

<template>
  <div>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <el-button @click="send()">发送</el-button>
    <el-button @click="stop()">终止</el-button>
  </div>
</template>
<script>

export default {
  data() {
    return {
      input: '',
      controller: {}
    }
  },
  created() {

  },
  methods: {
    async send() {
      this.controller = new AbortController();
      let signal = this.controller.signal;
      let res_data = await axios.get('/xxxx',{signal});
    },
    stop() {
      this.controller.abort();
    }
  }
}
</script>