vue封装axios header

原创

mob64ca12dba5b0 2024-10-02 06:26:11 ©著作权

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

Vue 封装 Axios Header 实现教程

在现代 web 开发中，使用 Axios 进行 HTTP 请求已经成为一种常见的做法。在 Vue 项目中，我们可能需要封装 Axios，以便对请求的 headers 进行统一处理，方便在整个项目中使用。

一、工作流程

下面是封装 Axios Header 的基本流程：

步骤	描述
1	安装 Axios 库
2	创建 Axios 实例
3	配置请求头
4	封装请求方法
5	在 Vue 实例中使用封装的 Axios

二、详细步骤

1. 安装 Axios 库

在 Vue 项目中使用 Axios 之前，我们需要先安装该库。

npm install axios

此命令会将 Axios 库添加到项目的依赖中，以便我们后续使用。

2. 创建 Axios 实例

我们可以创建一个单独的文件来封装 Axios。这个文件可以命名为 http.js。

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

// 创建 Axios 实例
const http = axios.create({
  baseURL: ' // 替换为你的 API 基地址
  timeout: 10000, // 请求超时时间
});

// 导出 Axios 实例
export default http;

这里我们创建了一个 Axios 实例并设置了 baseURL 和 timeout。

3. 配置请求头

我们可以在 Axios 实例中配置请求头，以便每次发送请求时都附带这些头信息。

// http.js
// 在请求发送前设置请求头
http.interceptors.request.use(
  config => {
    config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`; // 设置 Authorization 头
    config.headers['Content-Type'] = 'application/json'; // 设置 Content-Type 头
    return config; // 返回配置
  },
  error => {
    return Promise.reject(error); // 返回错误
  }
);

这里我们使用了 Axios 的请求拦截器，在每次请求之前添加了 Authorization 和 Content-Type 请求头。

4. 封装请求方法

我们可以定义一些通用的方法来进行 GET、POST 等请求。

// http.js
export const get = (url, params) => {
  return http.get(url, { params }); // 使用 GET 方法
};

export const post = (url, data) => {
  return http.post(url, data); // 使用 POST 方法
};

// 也可以封装 PUT、DELETE 方法
export const put = (url, data) => {
  return http.put(url, data); // 使用 PUT 方法
};

export const del = (url) => {
  return http.delete(url); // 使用 DELETE 方法
};

这些方法将会根据不同的请求类型进行请求，你可以直接调用它们。

5. 在 Vue 实例中使用封装的 Axios

在 Vue 组件中使用封装好的 Axios 方法非常简单。

// ExampleComponent.vue
<template>
  <div>
    数据
  </div>
</template>

<script>
import { get, post } from '@/http.js'; // 导入封装的 Axios 方法

export default {
  data() {
    return {
      info: null,
    };
  },
  mounted() {
    this.fetchData(); // 组件挂载后获取数据
  },
  methods: {
    fetchData() {
      get('/endpoint') // 调用 GET 方法
        .then(response => {
          this.info = response.data; // 处理返回的数据
        })
        .catch(error => {
          console.error('请求错误:', error);
        });
    },
    submitData() {
      post('/endpoint', { /* 数据 */ })
        .then(response => {
          console.log('提交成功:', response);
        })
        .catch(error => {
          console.error('提交错误:', error);
        });
    },
  },
};
</script>

在这个组件中，我们使用 mounted 钩子来获取数据，并定义了一个用于提交数据的 submitData 方法。

三、项目进度安排

下面是一个简单的甘特图，可以帮助你理解项目的进度安排。

gantt
    title 封装 Axios Header 项目进度
    dateFormat  YYYY-MM-DD
    section 安装与配置
    安装 Axios          :a1, 2023-10-01, 1d
    创建 Axios 实例     :after a1  , 1d
    section 请求配置
    配置请求头         :after a1  , 2d
    封装请求方法      :after a1  , 1d
    section 在 Vue 中使用
    使用封装的方法    :2023-10-05  , 2d