返回

掌控axios：请求拦截中的那些魔法时刻

前端

Axios 请求拦截器的终极指南

在现代前端开发中，Axios 库已成为发送 HTTP 请求的事实标准。通过其直观且功能丰富的 API，开发者可以轻松处理 HTTP 请求和响应。然而，在某些场景下，需要更精细的控制，例如取消重复请求、在路由切换时取消请求、配置加载状态、自动抛出状态码错误以及防止重复弹框消息。本博客将深入探究 Axios 请求拦截器的这些高级用法，帮助你成为一名出色的前端开发者。

擒拿重复请求：上次请求不再碍事

想象一下这个场景：用户快速点击一个按钮，触发了两次请求。理想情况下，我们只想保留最新的请求，取消上一次请求。为此，我们可以利用 Axios 的 CancelToken 机制。首先，我们在请求拦截器中创建和附加一个取消标记：

axios.interceptors.request.use((config) => {
  // 取消上次请求
  if (cancel) {
    cancel('上次请求已取消');
  }

  // 创建新的取消标记
  cancel = axios.CancelToken.source();
  // 将取消标记添加到请求配置中
  config.cancelToken = cancel.token;

  return config;
}, (error) => {
  // 处理请求错误
  return Promise.reject(error);
});

当组件卸载时，我们取消请求，防止它们在后台继续运行，浪费资源：

onUnmounted(() => {
  if (cancel) {
    cancel('组件卸载');
  }
});

路由切换时，果断取消接口请求

在单页应用程序（SPA）中，当用户在页面之间切换时，正在进行的请求变得没有必要。为了优化性能，我们可以利用 Vue Router 的 beforeEach 钩子来取消这些请求：

axios.interceptors.request.use((config) => {
  // 取消上次请求
  if (cancel) {
    cancel('路由切换已取消');
  }

  // 创建新的取消标记
  cancel = axios.CancelToken.source();
  // 将取消标记添加到请求配置中
  config.cancelToken = cancel.token;

  // 路由切换时取消请求
  const router = useRouter();
  router.beforeEach((to, from, next) => {
    if (cancel) {
      cancel('路由切换已取消');
    }
    next();
  });

  return config;
}, (error) => {
  // 处理请求错误
  return Promise.reject(error);
});

加载状态：旋转吧，小菊花！

为了向用户提供视觉反馈，我们希望在发送请求时显示一个加载状态。使用 ref 变量，我们可以轻松跟踪加载状态：

import { ref } from 'vue';

const loading = ref(false);

然后，在请求拦截器中，我们更新 loading 状态：

axios.interceptors.request.use((config) => {
  loading.value = true;
  return config;
}, (error) => {
  loading.value = false;
  return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
  loading.value = false;
  return response;
}, (error) => {
  loading.value = false;
  return Promise.reject(error);
});

现在，你可以在需要的地方使用 loading 状态来显示或隐藏加载组件：

<div v-if="loading">
  <loading-component />
</div>

状态码自动抛错：错误一览无余

为了便于错误处理，我们可以配置 Axios 在收到非 200 状态码时自动抛出错误：

axios.interceptors.response.use((response) => {
  const { status } = response;
  if (status !== 200) {
    return Promise.reject(new Error(`请求错误，状态码：${status}`));
  }

  return response;
}, (error) => {
  // 处理请求错误
  return Promise.reject(error);
});

现在，你可以使用 try-catch 块来捕获和处理这些错误：

try {
  const response = await axios.get('/api/users');
} catch (error) {
  // 处理错误
}

弹框消息优化：告别重复困扰

为了防止向用户显示重复的错误消息，我们可以使用一个状态变量来跟踪当前的错误消息：

import { ref } from 'vue';

const errorMessage = ref('');

然后，在请求拦截器中，我们更新 errorMessage 状态：

axios.interceptors.response.use((response) => {
  errorMessage.value = '';
  return response;
}, (error) => {
  // 处理请求错误
  errorMessage.value = error.message;
  return Promise.reject(error);
});

现在，你可以在需要的地方使用 errorMessage 状态来显示错误消息：

<div v-if="errorMessage">
  {{ errorMessage }}
</div>

结语

通过充分利用 Axios 请求拦截器的这些高级用法，你已经掌握了在各种情况下控制 HTTP 请求的强大工具。从取消重复请求到配置加载状态，再到自动抛出错误和防止重复弹框消息，这些技巧将显著提高你的前端开发效率和代码质量。通过将这些技巧应用到你的项目中，你将打造出更强大、更用户友好的应用程序。

常见问题解答

  1. 为什么要使用 Axios 请求拦截器？

    • Axios 请求拦截器允许你修改请求和响应，从而在各种情况下自定义 HTTP 请求行为。

  2. 如何取消重复请求？

    • 使用 CancelToken 机制，你可以在发出新请求时取消之前的请求。

  3. 如何在路由切换时取消请求？

    • 使用 Vue Router 的 beforeEach 钩子，你可以在路由切换时取消正在进行的请求。

  4. 如何配置加载状态？

    • 使用 ref 变量，你可以在发送和完成请求时跟踪加载状态，从而显示或隐藏加载组件。

  5. 如何防止重复弹框消息？

    • 使用状态变量跟踪当前的错误消息，并在显示错误消息之前检查它是否已存在。