vue3 axios 界面销毁取消请求

原创

mob649e815c000a 2024-10-27 06:29:28 ©著作权

文章标签 ios Vue 类图 文章分类 iOS 移动开发

©著作权归作者所有：来自51CTO博客作者mob649e815c000a的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue 3 和 Axios：如何在界面销毁时取消请求

在现代前端开发中，使用 Vue 3 和 Axios 进行 API 请求是常见的做法。然而，管理这些请求很关键，特别是在组件销毁时取消未完成的请求。本文将深入探讨这一主题，并通过代码示例和图示帮助您更好地理解。

为什么需要取消请求？

在单页面应用（SPA）中，用户的操作可能会迅速导致组件的加载和卸载。例如，当用户导航到另一个视图时，当前视图的 API 请求可能仍在进行中。此时，如果不取消这些请求，可能会出现：

内存泄漏：未完成的请求会占用内存资源。
状态混乱：请求完成时正在操作的组件已经被销毁，导致错误的状态更新。

如何实现请求的取消？

使用 Axios，我们可以通过 CancelToken 来实现请求的取消。下面是一个简单的 Vue 3 组件示例，展示如何在组件销毁时取消请求。

代码示例

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="data">{{ data }}</div>
  </div>
</template>

<script>
import { ref, onUnmounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const data = ref(null);
    const cancelTokenSource = axios.CancelToken.source();

    const fetchData = async () => {
      try {
        const response = await axios.get(' {
          cancelToken: cancelTokenSource.token,
        });
        data.value = response.data;
      } catch (error) {
        if (axios.isCancel(error)) {
          console.log('Request canceled:', error.message);
        } else {
          console.error('Request failed:', error);
        }
      }
    };

    onUnmounted(() => {
      cancelTokenSource.cancel('Component unmounted, canceling any ongoing requests.');
    });

    return { data, fetchData };
  },
};
</script>

代码解析

创建 CancelToken: 在 setup 函数中调用 axios.CancelToken.source() 方法，生成一个取消令牌。
发送请求: 在 fetchData 方法中，当发送请求时，附加 cancelToken。
组件销毁时取消请求: 通过 onUnmounted 钩子，当组件被销毁时调用取消方法，确保在组件卸载时取消任何未完成的请求。

状态图

通过 Mermaid 语法，我们可以描述请求的状态变化。

stateDiagram
    [*] --> Idle
    Idle --> Fetching: fetchData()
    Fetching --> Success: response received
    Fetching --> Failure: error
    Fetching --> Canceled: request canceled
    Success --> [*]
    Failure --> [*]
    Canceled --> [*]

状态图解析

Idle: 初始状态，组件未发起请求。
Fetching: 组件正在获取数据。
Success: 请求成功，数据返回。
Failure: 请求失败，处理错误。
Canceled: 请求被取消，适用于未结束的请求。

类图

接下来，我们可以使用 Mermaid 语法展示相关的类图，使得请求的结构更加清晰。

classDiagram
    class Axios {
        +get(url: string, config: object)
        +CancelToken: source()
    }
    class CancelToken {
        +token: string
        +cancel(message: string)
    }
    Axios --> CancelToken : uses