当前位置：首页 > wzjs >正文

大连做网站需要多少钱Wordpress一直刷不出

wzjs 2025/9/8 20:06:48

大连做网站需要多少钱,Wordpress一直刷不出,互联网舆情研究中心,一般做自己的网站需要什么前言上一篇文章我们处理了axios的重复请求问题axios重复请求，今天来说一下如何在离开某个页面的时候将正在发送的请求取消掉开始基于上一篇的axios封装，当我们在编写某个页面的请求的时候 import request from /request/index;export const test2…

前言

上一篇文章我们处理了axios的重复请求问题axios重复请求，今天来说一下如何在离开某个页面的时候将正在发送的请求取消掉

开始

基于上一篇的axios封装，当我们在编写某个页面的请求的时候

import request from '@/request/index';export const test2: any = async (data: any, onCancel: OnCancel) => {const controller = new AbortController();const requestPromise = request.post('/test', data, {signal: controller.signal,});if (typeof onCancel === 'function') {// 如果是一个函数，则直接调用传一个取消方法给 这个方法// 所以只要传进来是方法，就会直接传一个参数并直接触发这个函数// 那传过来的这个方法就会接收到一个参数（就是取消函数() => controller.abort()）// 在调用uploadFile就可以拿到这个参数onCancel(() => controller.abort()) as any; // 调用 onCancel 时传入取消函数}return requestPromise;
};

上面是用在页面中的请求函数，new AbortController()是axios官网推荐的用法，具体请查看官网

使用

废话少说，直接上代码

<template><div><el-button @click="requestAxios2">发送请求2</el-button><el-button @click="requestAxios3">发送请求3</el-button></div>
</template>
<script setup lang="ts">
import { test2 } from '@/request/test/index';
const list: CancelFunction[] = [];
// 发送post请求
const requestAxios2 = async () => {try {const requestPromise = await test2({ page: 1, limit: 10 },(oncancle: CancelFunction) => {list.push(oncancle);},);console.log(requestPromise);} catch (error) {console.error('Error in requestAxios2:', error);}
};const requestAxios3 = async () => {try {const requestPromise = await test2({ page: 1, limit: 100 },(oncancle: CancelFunction) => {list.push(oncancle);},);console.log(requestPromise);} catch (error) {if (error === '取消请求') {console.log('取消请求');}}
};onBeforeUnmount(() => {list.forEach((item: any) => {item();});
});
</script>
<style lang="scss" scoped></style>

当我们在调用函数的时候，传入一个回调函数，将这个回调函数的的值保存在一个list中，当离开页面的时候直接循环调用这个数组，并执行依次执行，就能实现当离开页面的时候取消正在发送的请求

展示结果

当我们离开之后页面会打印取消请求，截图可能不容易开出来，具体实现查看，不过后端代码没有在上面，这里放出来大家可以参考一下
后端：

// 使用express
const express = require("express");
const cors = require("cors");
const app = express();
const port = 8000;
// 设置跨域
// 安装cors
// 使用cors解决跨域
// 中间件，用于解析 JSON 请求体
app.use(express.json());// 中间件，用于解析 URL 编码请求体
app.use(express.urlencoded({ extended: true }));
app.use(cors());
const timeout = 3000;
app.get("/api/table/:id", (req, res) => {setTimeout(() => {res.send("结束，get");}, timeout);
});
app.get("/api/table", (req, res) => {// 获取请求参数let { page, limit } = req.query;setTimeout(() => {res.send("结束，get");}, timeout);
});
app.post("/api/table", (req, res) => {// 获取请求参数let { page, limit } = req.body;setTimeout(() => {res.send("结束，post");}, timeout);
});
app.post("/test", (req, res) => {// 获取post请求参数//   console.log(req.body, "req");let { page, limit } = req.body;setTimeout(() => {res.send({code: 200,data: {page,limit,},});}, timeout);
});
app.listen(port, () => {console.log("\x1b[36m%s\x1b[0m", "{^_^} 启动成功了哦！");
});