vue AbortController终止正在执行的方法的代码

以下是一个使用AbortController终止正在执行方法的Vue代码示例：

<template>
  <div>
    <button @click="startLongRunningTask">开始任务</button>
    <button @click="stopLongRunningTask">停止任务</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      abortController: null,
      isTaskRunning: false
    }
  },
  methods: {
    startLongRunningTask() {
      this.isTaskRunning = true;
      this.abortController = new AbortController();
      try {
        // 模拟一个长时间运行的任务
        let i = 0;
        while (this.isTaskRunning) {
          console.log(i++);
          await new Promise(resolve => setTimeout(resolve, 1000));
        }
      } catch (e) {
        if (e instanceof DOMException && e.name === 'AbortError') {
          console.log('任务被中止');
        } else {
          console.log('发生错误', e);
        }
      }
    },
    stopLongRunningTask() {
      this.isTaskRunning = false;
      this.abortController.abort();
    }
  }
}
</script>

这个示例包含了两个按钮，一个用于开始一个长时间运行的任务，另一个用于终止任务。在startLongRunningTask方法中，我们创建了一个AbortController实例，并在while循环中执行了模拟长时间运行的任务。当用户点击停止任务按钮时，我们设置isTaskRunning为false，并调用abort方法来中止任务。在catch语句中，我们检查是否发生AbortError，如果是的话，我们打印一条消息来表示任务已经被中止。