vue使用axios请求拦截

原创

mob64ca12e3dd9e 2025-01-19 07:37:44 ©著作权

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

Vue 使用 Axios 请求拦截教程

在现代前端开发中，使用 Axios 进行 HTTP 请求是一种常见的做法。为了更好地管理请求，可能需要对请求进行拦截，这样可以统一处理请求或修改请求参数。本文将详细讲解如何在 Vue 项目中实现 Axios 的请求拦截。

流程概述

实现 Axios 请求拦截的主要步骤如下：

步骤	描述
1	安装 Axios
2	创建 Axios 实例
3	添加请求拦截器
4	在 Vue 组件中使用 Axios 实例

flowchart TD
    A[开始] --> B[安装 Axios]
    B --> C[创建 Axios 实例]
    C --> D[添加请求拦截器]
    D --> E[在 Vue 组件中使用]
    E --> F[结束]

详细步骤

步骤 1: 安装 Axios

在你的 Vue 项目中，你需要安装 Axios。可以通过 npm 或 yarn 进行安装。

npm install axios

步骤 2: 创建 Axios 实例

创建一个新的 JavaScript 文件（例如 axiosInstance.js），在这个文件中创建并配置 Axios 实例。

// axiosInstance.js
import axios from 'axios';

// 创建一个axios实例
const axiosInstance = axios.create({
    baseURL: ' // 设置通用的请求基础 URL
    timeout: 10000, // 设置请求超时时间
});

// 导出axios实例
export default axiosInstance;

代码解析：
- 引入 Axios 库；
- 创建 Axios 实例，设置基础 URL 和超时时间；
- 将实例导出，以供其他模块使用。

步骤 3: 添加请求拦截器

在同一个 axiosInstance.js 文件中，添加请求拦截器，用于处理每个请求的逻辑。

// 添加请求拦截器
axiosInstance.interceptors.request.use(
    (config) => {
        // 在发送请求之前做些什么，比如添加 Authorization 头
        const token = localStorage.getItem('token'); // 假设我们从localStorage获取用户token
        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`; // 将token添加到请求头中
        }
        return config;  // 返回修改后的请求配置
    },
    (error) => {
        // 处理请求错误
        return Promise.reject(error); // Reject 报错
    }
);

代码解析：
- interceptors.request.use 是设置请求拦截器的主要方法；
- 通过 config 参数，你可以修改请求头或者请求参数；
- 处理请求错误，可以通过 Promise.reject 返回错误。

步骤 4: 在 Vue 组件中使用 Axios 实例

你可以在任何 Vue 组件中导入这个 Axios 实例来发送请求。

<template>
    <div>
        数据请求示例
        <button @click="fetchData">请求数据</button>
    </div>
</template>

<script>
import axiosInstance from './axiosInstance'; // 导入自定义的axios实例

export default {
    methods: {
        async fetchData() {
            try {
                const response = await axiosInstance.get('/data'); // 使用axios实例请求数据
                console.log(response.data); // 处理返回的数据
            } catch (error) {
                console.error('请求错误:', error);
            }
        }
    }
}
</script>

代码解析：
- 通过 import 导入自定义的 Axios 实例；
- 定义 fetchData 方法使用 Axios 实例进行请求；
- 通过 console.log 输出返回的数据，处理过程简单直观。

关系图

erDiagram
    USERS {
        string id PK "用户ID"
        string name "用户名"
        string token "用户令牌"
    }
    REQUESTS {
        string id PK "请求ID"
        string user_id FK "用户ID"
        string status "请求状态"
    }
    USERS ||--o{ REQUESTS : creates

在这个关系图中，我们定义了用户（USERS）和请求（REQUESTS）之间的关系。每个用户可以创建多条请求。