添加取消请求

2026-05-07 06:02:58 +08:00 · 2025-01-02 15:39:36 +08:00
parent 4152d0f715
commit 1d8c71da3f
6 changed files with 93 additions and 92 deletions
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -6,7 +6,7 @@ import { formatSeason } from '@/@core/utils/formatters'
 import api from '@/api'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
 import type { MediaInfo, NotExistMediaInfo, Subscribe, TmdbSeason } from '@/api/types'
-import router from '@/router'
+import router, { registerAbortController } from '@/router'
 import noImage from '@images/no-image.jpeg'
 import tmdbImage from '@images/logos/tmdb.png'
 import doubanImage from '@images/logos/douban-black.png'
@@ -215,6 +215,7 @@ async function removeSubscribe() {
 // 查询当前媒体是否已订阅
 async function handleCheckSubscribe() {
  try {
+
    const result = await checkSubscribe(props.media?.season)
    if (result) isSubscribed.value = true
  } catch (error) {
@@ -225,6 +226,11 @@ async function handleCheckSubscribe() {
 // 查询当前媒体是否已入库
 async function handleCheckExists() {
  try {
+    let abortController: AbortController | null = null;
+
+    abortController = new AbortController();
+    registerAbortController(abortController);
+    const { signal } = abortController;
    const result: { [key: string]: any } = await api.get('mediaserver/exists', {
      params: {
        tmdbid: props.media?.tmdb_id,
@@ -233,6 +239,7 @@ async function handleCheckExists() {
        season: props.media?.season,
        mtype: props.media?.type,
      },
+      signal
    })

    if (result.success) isExists.value = true
@@ -244,6 +251,11 @@ async function handleCheckExists() {
 // 调用API检查是否已订阅，电视剧需要指定季
 async function checkSubscribe(season = 0) {
  try {
+    let abortController: AbortController | null = null;
+
+    abortController = new AbortController();
+    registerAbortController(abortController);
+    const { signal } = abortController;
    const mediaid = getMediaId()

    const result: Subscribe = await api.get(`subscribe/media/${mediaid}`, {
@@ -251,6 +263,7 @@ async function checkSubscribe(season = 0) {
        season,
        title: props.media?.title,
      },
+      signal
    })

    return result.id || null
@@ -393,7 +406,7 @@ function setupIntersectionObserver() {
 }

 onMounted(() => {
-  setupIntersectionObserver()
+  // setupIntersectionObserver()
 })

 onBeforeUnmount(() => {
@@ -444,25 +457,13 @@ function onRemoveSubscribe() {
  <VHover>
    <template #default="hover">
      <div ref="mediaCardRef">
-        <VCard
-          v-bind="hover.props"
-          :height="props.height"
-          :width="props.width"
-          class="outline-none shadow ring-gray-500 rounded-lg"
-          :class="{
+        <VCard v-bind="hover.props" :height="props.height" :width="props.width"
+          class="outline-none shadow ring-gray-500 rounded-lg" :class="{
            'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
            'ring-1': isImageLoaded,
-          }"
-          @click.stop="goMediaDetail(hover.isHovering ?? false)"
-        >
-          <VImg
-            aspect-ratio="2/3"
-            :src="getImgUrl"
-            class="object-cover aspect-w-2 aspect-h-3"
-            cover
-            @load="isImageLoaded = true"
-            @error="imageLoadError = true"
-          >
+          }" @click.stop="goMediaDetail(hover.isHovering ?? false)">
+          <VImg aspect-ratio="2/3" :src="getImgUrl" class="object-cover aspect-w-2 aspect-h-3" cover
+            @load="isImageLoaded = true" @error="imageLoadError = true">
            <template #placeholder>
              <div class="w-full h-full">
                <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
@@ -470,11 +471,9 @@ function onRemoveSubscribe() {
            </template>
          </VImg>
          <!-- 详情 -->
-          <VCardText
-            v-show="hover.isHovering || imageLoadError"
+          <VCardText v-show="hover.isHovering || imageLoadError"
            class="w-full h-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
-            style="background: linear-gradient(rgba(45, 55, 72, 40%) 0%, rgba(45, 55, 72, 90%) 100%)"
-          >
+            style="background: linear-gradient(rgba(45, 55, 72, 40%) 0%, rgba(45, 55, 72, 90%) 100%)">
            <span class="font-bold">{{ props.media?.year }}</span>
            <h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
              {{ props.media?.title }}
@@ -488,35 +487,21 @@ function onRemoveSubscribe() {
            </div>
          </VCardText>
          <!-- 类型角标 -->
-          <VChip
-            v-show="isImageLoaded"
-            variant="elevated"
-            size="small"
-            :class="getChipColor(props.media?.type || '')"
-            class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
-          >
+          <VChip v-show="isImageLoaded" variant="elevated" size="small" :class="getChipColor(props.media?.type || '')"
+            class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold">
            {{ props.media?.type }}
          </VChip>
          <!-- 本地存在标识 -->
          <ExistIcon v-if="isExists && !hover.isHovering" />
          <!-- 评分角标 -->
-          <VChip
-            v-if="isImageLoaded && props.media?.vote_average && !(isExists && !hover.isHovering)"
-            variant="elevated"
-            size="small"
-            :class="getChipColor('rating')"
-            class="absolute right-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
-          >
+          <VChip v-if="isImageLoaded && props.media?.vote_average && !(isExists && !hover.isHovering)"
+            variant="elevated" size="small" :class="getChipColor('rating')"
+            class="absolute right-2 top-2 bg-opacity-80 shadow-md text-white font-bold">
            {{ props.media?.vote_average }}
          </VChip>
          <!--来源图标-->
-          <VAvatar
-            size="24"
-            density="compact"
-            class="absolute bottom-1 right-1"
-            tile
-            v-if="!hover.isHovering && isImageLoaded && props.media?.source"
-          >
+          <VAvatar size="24" density="compact" class="absolute bottom-1 right-1" tile
+            v-if="!hover.isHovering && isImageLoaded && props.media?.source">
            <VImg cover :src="sourceIconDict[props.media?.source]" class="shadow-lg" />
          </VAvatar>
        </VCard>
@@ -535,14 +520,8 @@ function onRemoveSubscribe() {
        <VList v-model:selected="seasonsSelected" lines="three" select-strategy="classic">
          <VListItem v-for="(item, i) in seasonInfos" :key="i" :value="item">
            <template #prepend>
-              <VImg
-                height="90"
-                width="60"
-                :src="getSeasonPoster(item.poster_path || '')"
-                aspect-ratio="2/3"
-                class="object-cover rounded shadow ring-gray-500 me-3"
-                cover
-              >
+              <VImg height="90" width="60" :src="getSeasonPoster(item.poster_path || '')" aspect-ratio="2/3"
+                class="object-cover rounded shadow ring-gray-500 me-3" cover>
                <template #placeholder>
                  <div class="w-full h-full">
                    <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
@@ -581,12 +560,6 @@ function onRemoveSubscribe() {
    </VCard>
  </VBottomSheet>
  <!-- 订阅编辑弹窗 -->
-  <SubscribeEditDialog
-    v-if="subscribeEditDialog"
-    v-model="subscribeEditDialog"
-    :subid="subscribeId"
-    @close="subscribeEditDialog = false"
-    @save="subscribeEditDialog = false"
-    @remove="onRemoveSubscribe"
-  />
+  <SubscribeEditDialog v-if="subscribeEditDialog" v-model="subscribeEditDialog" :subid="subscribeId"
+    @close="subscribeEditDialog = false" @save="subscribeEditDialog = false" @remove="onRemoveSubscribe" />
 </template>
--- a/src/pages/ranking.vue
+++ b/src/pages/ranking.vue
@@ -68,6 +68,7 @@ const viewList = reactive<{ apipath: string; linkurl: string; title: string }[]>
    title: '豆瓣全球剧集榜',
  },
 ])
+
 </script>

 <template>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -189,7 +189,18 @@ const router = createRouter({
    },
  ],
 })
+const abortControllers = new Set<AbortController>()

+function registerAbortController(controller: AbortController) {
+  abortControllers.add(controller)
+}
+
+function abortAllControllers() {
+  for (const controller of abortControllers) {
+    controller.abort()
+  }
+  abortControllers.clear()
+}
 // 路由导航守卫
 router.beforeEach((to, from, next) => {
  // 总是记录非login路由
@@ -198,8 +209,11 @@ router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
+    abortAllControllers() // 中止所有组件的任务
+
    next()
  }
 })

-export default router
+export default router // 导出默认对象
+export { registerAbortController } // 另行导出其他功能
--- a/src/views/discover/MediaCardListView.vue
+++ b/src/views/discover/MediaCardListView.vue
@@ -27,7 +27,6 @@ const isRefreshed = ref(false)
 // 数据列表
 const dataList = ref<MediaInfo[]>([])
 const currData = ref<MediaInfo[]>([])
-
 // 拼装参数
 function getParams() {
  let params = {
@@ -41,6 +40,7 @@ function getParams() {
 // 获取列表数据
 async function fetchData({ done }: { done: any }) {
  try {
+    console.log(1111)
    if (!props.apipath) return

    // 如果正在加载中，直接返回
@@ -53,6 +53,7 @@ async function fetchData({ done }: { done: any }) {
    if (!hasScroll()) {
      // 加载多次
      while (!hasScroll()) {
+        console.log(hasScroll())
        // 设置加载中
        loading.value = true
        // 请求API
@@ -78,6 +79,8 @@ async function fetchData({ done }: { done: any }) {
    } else {
      // 加载一次
      // 设置加载中
+      console.log(hasScroll())
+
      loading.value = true
      // 请求API
      currData.value = await api.get(props.apipath, {
@@ -115,15 +118,7 @@ async function fetchData({ done }: { done: any }) {
    <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card mx-3" tabindex="0">
      <MediaCard v-for="data in dataList" :key="data.tmdb_id || data.douban_id" :media="data" />
    </div>
-    <NoDataFound
-      v-if="dataList.length === 0 && isRefreshed"
-      error-code="404"
-      error-title="没有数据"
-      error-description="无法获取到媒体信息。"
-    />
+    <NoDataFound v-if="dataList.length === 0 && isRefreshed" error-code="404" error-title="没有数据"
+      error-description="无法获取到媒体信息。" />
  </VInfiniteScroll>
 </template>
-
-<style lang="scss">
-
-</style>
--- a/src/views/discover/MediaCardSlideView.vue
+++ b/src/views/discover/MediaCardSlideView.vue
@@ -3,6 +3,7 @@ import api from '@/api'
 import type { MediaInfo } from '@/api/types'
 import MediaCard from '@/components/cards/MediaCard.vue'
 import SlideView from '@/components/slide/SlideView.vue'
+import { registerAbortController } from "@/router";

 // 输入参数
 const props = defineProps({
@@ -10,8 +11,9 @@ const props = defineProps({
  linkurl: String,
  title: String,
 })
+let abortController: AbortController | null = null;

-provide('rankingPropsKey', reactive({...props}))
+provide('rankingPropsKey', reactive({ ...props }))

 // 组件加载完成
 const componentLoaded = ref(false)
@@ -24,8 +26,10 @@ async function fetchData() {
  try {
    if (!props.apipath)
      return
-
-    dataList.value = await api.get(props.apipath)
+    abortController = new AbortController();
+    registerAbortController(abortController);
+    const { signal } = abortController;
+    dataList.value = await api.get(props.apipath, { signal })
    if (dataList.value.length > 0)
      componentLoaded.value = true
  }
@@ -35,23 +39,23 @@ async function fetchData() {
 }

 // 加载时获取数据
-onMounted(fetchData)
+onMounted(() => {
+  fetchData(); // 异步操作，不阻塞导航
+});
+onActivated(() => {
+  console.log("组件被激活");
+  if (dataList.value.length == 0) {
+    fetchData(); // 异步操作，不阻塞导航
+
+  }
+});
 </script>

 <template>
-  <SlideView
-    v-if="componentLoaded"
-  >
+  <SlideView v-if="componentLoaded">
    <template #content>
-      <template
-        v-for="data in dataList"
-        :key="data.tmdb_id || data.douban_id || data.bangumi_id"
-      >
-        <MediaCard
-          :media="data"
-          height="15rem"
-          width="10rem"
-        />
+      <template v-for="data in dataList" :key="data.tmdb_id || data.douban_id || data.bangumi_id">
+        <MediaCard :media="data" height="15rem" width="10rem" />
      </template>
    </template>
  </SlideView>
--- a/yarn.lock
+++ b/yarn.lock
@@ -6618,8 +6618,16 @@ stop-iteration-iterator@^1.0.0:
  dependencies:
    internal-slot "^1.0.4"

-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.3:
-  name string-width-cjs
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.3:
  version "4.2.3"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -6692,8 +6700,14 @@ stringify-object@^3.3.0:
    is-obj "^1.0.1"
    is-regexp "^1.0.0"

-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  name strip-ansi-cjs
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==