先看需求： 点击开始,使用fetch()发送请求,接收数据流.  点击停止,终止fetch()请求。

问题：要想终止fecth() 请求的数据流, 就要销毁new的方法

方法1. 创建存放全局变量的js

在store文件夹中新建js文件config,并填入内容,将其暴露出去

const controller = new AbortController();
const signal = controller.signal;export {signal,controller,
}

在main.js中:

import {signal,controller,
}from "@/store/config.js"Vue.prototype.signal = signal;
Vue.prototype.controller = controller;

这样在vue文件中就可使用了,例如:

this.controller.abort(); // 终止请求

方法1new的方法是手动创建的,每次销毁之后,在不刷新的前提下,是没办法重新new的, 实际操作就是, 点击了开始接收数据流, 点击停止销毁方法,停止接收数据流,   在不刷新页面的前提下想要再次点击开始,接收数据流, 然后就没办法停止了.就只能方法2了

方法2 将new的方法,挂载到window上.

像这样:

window["controller" + (index + 1)] = new AbortController();window["signal" + (index + 1)] =window["controller" + (index + 1)].signal;

我这里的index是循环出来多个,  每次点击开始,就新建一次.

在点击停止的时候就销毁:

   window["controller" + (index + 1)].abort();

这样就非常简便的实现了想要的功能.

哪里写的不对的, 欢迎讨论~