Vue 封装axios 修改header

原创

mob649e815b8ae8 2024-08-27 07:05:43 ©著作权

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

Vue 封装 Axios 并修改 Header 的实现教程

1. 引言

在现代前端开发中，处理网络请求是一个常见的任务。Axios 是一个流行的用于发起 HTTP 请求的库，而在 Vue 中，我们常常需要封装它以便于使用，同时有时需要修改请求的 Header 信息。本文将详细介绍如何在 Vue 中封装 Axios，并修改请求的 Header。

2. 流程概述

以下是整件事情的流程概述：

步骤	描述	代码示例
1	安装 Axios	`npm install axios`
2	创建 Axios 实例	`const axiosInstance = axios.create({...})`
3	修改 Header	`axiosInstance.defaults.headers.common['Authorization'] = 'Bearer TOKEN';`
4	使用封装的 Axios	`axiosInstance.get('/api/data')`

3. 具体实现步骤

3.1 安装 Axios

第一步，确保你已在项目中安装了 Axios。可以使用 npm 命令在终端中运行以下命令：

npm install axios

3.2 创建 Axios 实例

接下来，我们需要创建一个 Axios 实例，以便于配置和复用。通常，你可以在一个单独的文件中进行封装，比如 axios.js：

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

// 创建 Axios 实例
const axiosInstance = axios.create({
    baseURL: ' // API 所在的基础路径
    timeout: 5000, // 请求超时的时间，单位毫秒
});

// 导出 Axios 实例
export default axiosInstance;

3.3 修改 Header

如果需要在请求中添加或修改 Header，可以直接操作 Axios 实例的 defaults.headers 属性。在这里，通过设置 Authorization 字段来添加 Bearer Token：

// axios.js 中继续添加的部分
axiosInstance.defaults.headers.common['Authorization'] = 'Bearer YOUR_ACCESS_TOKEN'; // 设置公共请求头

// 也可以针对具体的请求设置请求头
axiosInstance.defaults.headers.get['Custom-Header'] = 'value'; // 针对 GET 请求设置 Custom Header

export default axiosInstance; // 继续导出

3.4 使用封装的 Axios

最后，当你需要发起请求时，只需导入你封装好的 Axios 实例即可：

// 在你需要发起请求的 Vue 组件中
import axiosInstance from './axios.js';

export default {
    data() {
        return {
            data: null,
        };
    },
    methods: {
        fetchData() {
            axiosInstance.get('/data') // 发起 GET 请求
                .then(response => {
                    this.data = response.data; // 处理响应数据
                })
                .catch(error => {
                    console.error('Error fetching data:', error); // 处理错误
                });
        },
    },
    mounted() {
        this.fetchData(); // 在组件挂载后抓取数据
    },
};

4. 甘特图

下面是整个开发过程的甘特图，帮助你更好地理解每个步骤的时间安排。

gantt
    title Vue 封装 Axios 修改 Header
    dateFormat  YYYY-MM-DD
    section 项目准备
    安装 Axios         :a1, 2023-10-01, 1d
    section 封装 Axios
    创建实例          :a2, after a1, 1d
    修改 Header       :a3, after a2, 1d
    section 使用 Axios
    调用实例          :a4, after a3, 1d