取消Vue中重复的axios请求

2024-01-13 05:06:51

Vue中封装axios的取消请求事项

前言

在现代网络应用程序中，高效的HTTP请求处理至关重要。axios是一个流行的JavaScript库，用于简化XMLHttpRequest并提供跨浏览器的兼容性。然而，在某些情况下，需要取消重复或不再需要的请求以优化应用程序性能并避免服务器端资源浪费。

需要取消重复请求的场景

输入框搜索： 用户在输入框中输入时，频繁触发搜索请求，需要取消上一次未完成的请求。
Tab切换： 用户在多个选项卡之间切换时，需要取消当前选项卡中的未完成请求，避免浪费资源。
重复请求： 当用户快速连续地发起相同的请求时，需要取消较早的请求以防止重复处理。

分步指南

1. 创建自定义取消令牌

创建一个名为"cancelTokenSource"的取消令牌源，它将生成一个取消令牌和一个取消函数。

import axios from "axios";

export const cancelTokenSource = axios.CancelToken.source();

2. 请求拦截器

在Vue应用程序的请求拦截器中，为每个请求设置取消令牌。

// Vue.js request interceptor
axios.interceptors.request.use(
  config => {
    config.cancelToken = cancelTokenSource.token;
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

3. 响应拦截器

在响应拦截器中，使用"abort"函数取消任何未完成的请求。

// Vue.js response interceptor
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (axios.isCancel(error)) {
      console.log("Request canceled", error.message);
    } else {
      return Promise.reject(error);
    }
  }
);

4. 取消请求

在需要取消请求时，调用"cancelTokenSource"的"cancel"函数。

cancelTokenSource.cancel("Operation canceled by the user.");

示例

以下示例演示了如何在Vue应用程序中使用封装的取消机制：

// Vue component
<template>
  <input type="text" @input="search">
</template>

<script>
import { cancelTokenSource } from "./axios-cancel.js";

export default {
  data() {
    return {
      searchTerm: ""
    };
  },
  methods: {
    search() {
      // Cancel any previous requests
      cancelTokenSource.cancel("New search initiated.");

      // Create a new request
      axios
        .get("/api/search", {
          params: { q: this.searchTerm },
          cancelToken: cancelTokenSource.token
        })
        .then(response => {
          // Process search results
        })
        .catch(error => {
          if (axios.isCancel(error)) {
            // Request canceled
          } else {
            // Handle error
          }
        });
    }
  }
};
</script>