关于vue中使用全局变量的问题
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
先看需求 点击开始,使用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();
这样就非常简便的实现了想要的功能.
哪里写的不对的, 欢迎讨论~