Vue2 应用开发必备技能：构建优雅的 Axios 请求封装模块

Vue2 应用开发必备技能：构建优雅的 Axios 请求封装模块

• 前言
• 第一步：安装 Axios
• 第二步：创建 Axios 封装模块
• • 1. 引入 Axios
  • 2. 创建 Axios 实例
  • 3. 请求拦截器
  • 4. 响应拦截器
  • 5. 导出封装的实例
• 第三步：封装具体接口请求
• 第四步：在 Vue 组件中使用
• 总结

前言

在 Vue2 项目中，数据请求是最常见的操作之一。使用 Axios 是一个非常流行的选择，但为了更方便地管理和维护代码，我们通常需要对请求进行封装。今天，我将手把手教你如何封装 Axios 请求，让你的代码更加简洁、优雅。

第一步：安装 Axios

在项目中使用 Axios，需要先安装它。如果你还没有安装 Axios，可以通过以下命令完成：

npm install axios

安装完成后，你可以在项目中引用它。

第二步：创建 Axios 封装模块

在项目目录下，新建一个文件夹 utils，然后创建一个文件 request.js，用于封装 Axios。
在 request.js 文件中，进行如下操作：

1. 引入 Axios

import axios from 'axios';

2. 创建 Axios 实例

const service = axios.create({
  baseURL: 'https://api.example.com', // 基础路径，根据你的接口地址修改
  timeout: 5000 // 请求超时时间
});

3. 请求拦截器

通过请求拦截器，可以在发送请求前做一些处理，比如添加 Token：

service.interceptors.request.use(
  config => {
    // 在这里可以为请求添加自定义头部，比如 Token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 处理请求错误
    console.error('请求错误：', error);
    return Promise.reject(error);
  }
);

4. 响应拦截器

通过响应拦截器，可以统一处理接口响应数据或错误信息：

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);
    return Promise.reject(error);
  }
);

5. 导出封装的实例

export default service;

第三步：封装具体接口请求

接下来，我们可以基于封装的 Axios 实例，创建具体的 API 请求方法。
在 utils 文件夹下，新建一个文件 api.js，如下编写：

import request from './request';
// 获取用户信息
export function getUserInfo(userId) {
  return request({
    url: `/user/${userId}`,
    method: 'get'
  });
}
// 提交用户数据
export function submitUserData(data) {
  return request({
    url: '/user/submit',
    method: 'post',
    data
  });
}

第四步：在 Vue 组件中使用

现在，我们已经完成了 Axios 的封装，可以在 Vue 组件中直接使用这些 API 方法。
例如：

<template>
  <div>
    <h1>User Info</h1>
    <div v-if="user">
      <p>Name: {{ user.name }}</p>
      <p>Email: {{ user.email }}</p>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from '@/utils/api';

export default {
  data() {
    return {
      user: null
    };
  },
  methods: {
    async fetchUserInfo() {
      try {
        const userId = 1; // 示例用户 ID
        const response = await getUserInfo(userId);
        this.user = response.data;
      } catch (error) {
        console.error('获取用户信息失败：', error);
      }
    }
  },
  created() {
    this.fetchUserInfo();
  }
};
</script>

总结

通过封装 Axios，我们可以：

• 统一管理请求的基础配置；
• 方便地添加请求或响应的全局处理逻辑；
• 在项目中轻松复用和维护接口请求。