当前位置： 技术文章>> Vue 项目如何为 API 请求设置统一的拦截器？

文章标题：Vue 项目如何为 API 请求设置统一的拦截器？
  • 文章分类: 后端
  • 3558 阅读

在Vue项目中为API请求设置统一的拦截器是一个常见且实用的需求，它能帮助我们处理诸如请求前的身份验证、请求失败的重试逻辑、请求成功后的统一处理（如弹窗提示、数据格式化等）等场景。下面，我将详细阐述如何在Vue项目中，特别是结合axios这个流行的HTTP客户端库，来实现这一功能。同时，我会在适当的位置自然地提及“码小课”，作为一个假设的学习资源或示例引用，以符合您的要求。

一、引入axios

首先，确保你的Vue项目中已经安装了axios。如果还没有安装，可以通过npm或yarn来安装它：

npm install axios
# 或者
yarn add axios

安装完成后，你可以在你的Vue项目中创建一个axios实例，并配置基础的URL、超时时间等全局设置。为了后续方便管理，我们通常会将axios实例封装在一个单独的文件中，比如src/api/axios.js。

二、封装axios实例

在src/api/axios.js文件中，你可以这样创建一个axios实例并导出：

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // 例如，你可以在这里添加token
    // if (store.getters.token) {
    //   config.headers['X-Token'] = getToken();
    // }
    return config;
  },
  error => {
    // 对请求错误做些什么
    console.error('请求出错：', error); // for debug
    Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    const res = response.data;
    if (res.code !== 200) {
      // 根据业务逻辑处理错误代码
      console.error('接口响应错误：', res.message);
      // 可以抛出一个错误，在调用处捕获处理
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    // 对响应错误做点什么
    console.error('响应出错：', error); // for debug
    return Promise.reject(error);
  }
);

export default service;

三、使用axios实例

在封装好axios实例后，你就可以在你的Vue组件或者API服务文件中通过引入这个实例来发送请求了。这样做的好处是，所有的请求都会自动应用你在axios实例中设置的拦截器逻辑。

例如，在src/api/user.js中，你可以这样定义一个获取用户信息的API：

import request from '@/api/axios'; // 注意路径可能需要根据你的项目结构进行调整

export function fetchUserInfo(userId) {
  return request({
    url: '/user/info/' + userId,
    method: 'get'
  });
}

然后在你的Vue组件中，你可以这样调用这个API：

<template>
  <div>
    <button @click="getUserInfo">获取用户信息</button>
  </div>
</template>

<script>
import { fetchUserInfo } from '@/api/user'; // 引入API

export default {
  methods: {
    async getUserInfo() {
      try {
        const userInfo = await fetchUserInfo(1); // 假设我们要获取ID为1的用户信息
        console.log(userInfo); // 处理获取到的用户信息
      } catch (error) {
        console.error('获取用户信息失败：', error);
        // 可以在这里处理错误，比如显示错误提示
      }
    }
  }
}
</script>

四、进阶应用

1. 统一的错误处理

在上面的例子中，我们已经在响应拦截器中做了一些基本的错误处理，比如打印错误信息和根据HTTP状态码进行逻辑判断。但在实际项目中，你可能需要更复杂的错误处理逻辑，比如显示错误弹窗、将错误上报到错误监控平台等。这些都可以通过扩展响应拦截器来实现。

2. 请求重试机制

有时候，由于网络波动或服务器短暂不可用，我们的请求可能会失败。在这种情况下，自动重试机制可以显著提升用户体验。你可以通过递归调用axios实例或在请求拦截器中设置重试逻辑来实现。

3. 跨域问题处理

在开发过程中，你可能会遇到跨域请求的问题。这通常是由于浏览器的同源策略导致的。Vue CLI项目通过webpack-dev-server提供了代理功能，你可以在vue.config.js中配置代理，将API请求代理到目标服务器，从而绕过跨域问题。

4. 集成码小课资源

虽然本文主要聚焦于axios拦截器的设置，但值得一提的是，你可以在开发过程中利用“码小课”这样的资源来深入学习Vue及axios的更多高级用法和最佳实践。通过参与在线课程、阅读教程和案例分享，你可以更全面地掌握Vue项目开发的各个方面，从而提升自己的技能水平。

五、总结

通过为Vue项目中的API请求设置统一的拦截器，我们可以有效地管理和控制请求和响应的流程，实现诸如身份验证、错误处理、请求重试等高级功能。这不仅提高了代码的可维护性和复用性，还增强了项目的健壮性和用户体验。希望本文的介绍能对你有所帮助，并鼓励你在实际项目中尝试应用这些技术。同时，别忘了利用“码小课”这样的学习资源来不断提升自己的技能水平。

推荐文章