获取任务管理器实例

设置并发数量

取消所有请求

<template lang="pug">
.demo-1
	demo-chart(v-for="i in 16", :key="i", :index="i")
</template>

<script>
import DemoChart from "../components/demo-chart.vue";
import { HttpTaskManager } from "axios-queue";
export default {
	name: "demo-1",
	components: {
		DemoChart,
	},
	data() {
		return {};
	},
	watch: {},
	mounted() {
		HttpTaskManager.getInstance().limit = 4;
	},
	beforeDestroy() {
		HttpTaskManager.getInstance().abortAll();
	},
	methods: {},
};
</script>

<style lang="scss" scoped>
.demo-1 {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: 25% 25% 25% 25%;
}
</style>

构建任务

<template>
	<div class="demo-chart">
		<div class="content" ref="chart"></div>
		<div class="status">{{ httpTask.status }}</div>
	</div>
</template>

<script>
import { HttpTaskManager, HttpTask } from "axios-queue";
import { Chart } from "@antv/g2";
export default {
	name: "demo-chart",
	props: ["index"],
	mounted() {
		this.load();
	},
	data() {
		return {
			httpTask: "",
		};
	},
	created() {
		this._chart = null;
		this._httpTask = "";
		this._timer = "";
	},
	beforeDestroy() {
		if (this._chart) {
			this._chart.destroy();
			this._chart = null;
		}
		if (this._timer) {
			clearInterval(this._timer);
			this._timer = null;
		}
	},
	methods: {
		load() {
			let task = new HttpTask("get", "/demo/bigdata/concurrent");
			// task.weight = Math.ceil(Math.random() * 10);
			if (this.index === 1) {
				task.loopTime = 10000;
			}
			task.then((data) => {
				this.render(data.result);
			});
			HttpTaskManager.getInstance().pushOne(task);
			this.httpTask = task;
		},
		render(data) {
			if (!this._chart) {
				this._chart = new Chart({
					container: this.$refs.chart,
					autoFit: true,
					height: 300,
				});
				this._chart.data(data);
				this._chart
					.interval()
					.adjust("stack")
					.position("category*callTotalNum")
					.color("type");
				this._chart.render();
			} else {
				this._chart.changeData(data);
			}
		},
	},
};
</script>


<style scoped lang="scss">
.demo-chart {
	position: relative;
	background: #dddddd;
	margin: 5px;
	.content {
		height: 100%;
		width: 100%;
	}
	.status {
		position: absolute;
		z-index: 99;
		background: #d30d0d;
		width: 22px;
		height: 22px;
		line-height: 22px;
		text-align: center;
		color: #ffffff;
		border-radius: 22px;
		top: 0px;
	}
}
</style>