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

有设计感的网页设计肇庆seo排名

wzjs 2025/7/25 9:32:34

有设计感的网页设计,肇庆seo排名,山西省网站制作,怎么做飞机票的图片网站一、需求说明前端调请求接口过程中，主动取消请求二、流程说明三、解决方法 1、api文件：封装的接口 import http from "../../http/fetch"; export default {/*** description: 请求接口* param {*} data 所需参数* param {CancelToken} …

一、需求说明

前端调请求接口过程中，主动取消请求

二、流程说明

三、解决方法

1、api文件：封装的接口

import http from "../../http/fetch";
export default {/*** @description: 请求接口* @param {*} data 所需参数* @param {CancelToken} [cancelToken] 取消令牌* @return {*}*/handleQq(data: any, cancelToken: any) {return http({url: "/aaa/completions",method: "post",data: data,cancelToken: cancelToken});},
};

2、vue文件：页面 +js方法

<a-modalv-model:visible="resultData.visible":closable="false":maskClosable="false":footer="null":header="null"centered:width="280":getContainer="() => $refs.modalStyle"
><img src="../assets/images/lod.gif" alt="" class="gif" /><div class="mod">请求中，请稍后...</div><div class="tow" @click="deleteOk">取消请求</div>
</a-modal>

1、添加一个cancelTokenSource，创建一个取消令牌源

2、请求完后清空取消令牌源

3、通过cancel()方法取消请求了

import http from "@/api文件路径";
const { handleQq } = http;
import axios from "axios";// 创建取消控制器
let resultData = reactive({visible:false,// 请求中的标识弹窗，有一个可以点击取消请求按钮tokenSource: { cancelTokenSource: null as null | any }
})/*** @description: 调用接口* @return {*}*/
const handleWit = async () => {resultData.visible = true;resultData.tokenSource.cancelTokenSource = axios.CancelToken.source(); // 添加一个cancelTokenSource，创建一个取消令牌源let parm = { model: "deepseek" };const { data } = await handleQq(parm, resultData.tokenSource.cancelTokenSource.token);if (data) {console.log("请求成功")} else {message.warning("请求失败");}resultData.visible = false;resultData.tokenSource.cancelTokenSource = null; // 请求完后清空取消令牌源
};/*** @description: 取消请求* @return {*}*/
const deleteOk = () => {resultData.visible = false;if (resultData.tokenSource.cancelTokenSource) {resultData.tokenSource.cancelTokenSource.cancel("用户取消识别"); // 通过cancel()方法就可以取消请求了}
};