add axios serverResp error callback

src/assets/style/common4web.less

@@ -199,3 +199,15 @@ textarea {
 .ir-smooth {
 	image-rendering: smooth;
 }
+
+.cur-default {
+	cursor: default;
+}
+
+.cur-pointer {
+	cursor: pointer;
+}
+
+.cur-text {
+	cursor: text;
+}

src/components/captcha/index.vue

@@ -26,20 +26,47 @@ const props = withDefaults(defineProps<{
 const { width, height, from, api } = toRefs(props);
 
 const src = ref("");
-function update() {
+const captchaId = ref("");
-	src.value = `${api.value}?from=${from.value}&width=${width.value}&height=${height.value}&r=${Toolkit.random(0, 999999)}`;
+
+const emit = defineEmits<{
+	"update:captchaId": [id: string],
+}>();
+
+async function update() {
+	if (src.value && src.value.startsWith("blob:")) {
+		URL.revokeObjectURL(src.value);
+	}
+	const response = await fetch(`${api.value}?from=${from.value}&width=${width.value}&height=${height.value}&r=${Toolkit.random(0, 999999)}`);
+	if (!response.ok) {
+		throw new Error(`fetch captcha error: ${response.status}`);
+	}
+	captchaId.value = response.headers.get("X-Captcha-ID") || "";
+	src.value = URL.createObjectURL(await response.blob());
+	emit("update:captchaId", captchaId.value);
 }
 onMounted(update);
 
-defineExpose({
+watch([width, height], () => {
-	update
+	update();
 });
+
+onUnmounted(() => {
+	if (src.value && src.value.startsWith("blob:")) {
+		URL.revokeObjectURL(src.value);
+	}
+});
+
+defineExpose({
+	update,
+	getCaptchaId: () => captchaId.value,
+	refresh: update
+});
+
 </script>
 
 <style lang="less" scoped>
 .tui-captcha {
 	cursor: var(--tui-cur-pointer);
-	border: 1px solid gray;
 	display: block;
 	pointer-events: all;
 }

src/index.ts

@@ -35,6 +35,7 @@ export * from "./utils/directives/Popup";
 export type { ScrollListener } from "./utils/Scroller";
 export type { DraggableConfig } from "./utils/directives/Draggable";
 export type { PopupConfig } from "./utils/directives/Popup";
+export type { ErrorCallback } from "./utils/Network"
 
 const install = function (app: App) {
 	components.forEach(component => {

src/utils/Network.ts

@@ -1,20 +1,31 @@
 import axios from "axios";
 import { Response } from "~/types/Model";
 
+export type ErrorCallback = (response: Response) => void;
+
+let globalErrorCallback: ErrorCallback | null = null;
+
+export const setGlobalErrorCallback = (callback: ErrorCallback) => {
+	globalErrorCallback = callback;
+};
+
 axios.defaults.withCredentials = true;
-axios.interceptors.response.use((response: any) => {
+axios.interceptors.response.use((axiosResp: any) => {
-	if (!response.config.responseType) {
+	if (!axiosResp.config.responseType) {
 		// 服务端返回
-		const data = response.data as Response;
+		const serverResp = axiosResp.data as Response;
-		if (data.code < 40000) {
+		if (serverResp.code < 40000) {
 			// 200 或 300 HTTP 状态段视为成功
-			return data.data;
+			return serverResp.data;
 		} else {
+			if (globalErrorCallback) {
+				globalErrorCallback(serverResp);
+			}
 			// 由调用方处理
-			return Promise.reject(data.msg);
+			return Promise.reject(serverResp.msg);
 		}
 	}
-	return response.data;
+	return axiosResp.data;
 }, (error: any) => {
 	// 请求错误
 	if (error) {
@@ -34,4 +45,5 @@ axios.interceptors.response.use((response: any) => {
 
 export default {
 	axios,
+	setGlobalErrorCallback
 };