在现代的前端开发中，与后端进行数据交互是必不可少的。Axios 是一个基于 Promise 的 HTTP 客户端，广泛用于浏览器和 Node.js 环境中。在 Vue.js 项目中，Axios 通常用于发送 HTTP 请求。为了提高代码的可维护性和复用性，我们通常会对 Axios 进行封装。本文将详细介绍如何在 Vue2 项目中封装 Axios。

1. 安装 Axios

首先，我们需要在项目中安装 Axios。如果你还没有安装 Axios，可以通过 npm 或 yarn 进行安装：

npm install axios

或者

yarn add axios

2. 创建 Axios 实例

在 Vue 项目中，我们通常会在 src 目录下创建一个 api 文件夹，用于存放与 API 相关的代码。在这个文件夹中，我们可以创建一个 axios.js 文件，用于配置 Axios 实例。

// src/api/axios.js

import axios from 'axios';

// 创建 Axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 设置 API 的基础 URL
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // 例如：添加 token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data;
  },
  error => {
    // 对响应错误做些什么
    if (error.response) {
      // 根据不同的状态码进行不同的处理
      switch (error.response.status) {
        case 401:
          // 未授权，跳转到登录页面
          router.push('/login');
          break;
        case 404:
          // 资源未找到
          console.error('请求的资源不存在');
          break;
        default:
          console.error('请求失败', error.response.data);
      }
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error('请求超时或网络错误', error.request);
    } else {
      // 其他错误
      console.error('请求配置错误', error.message);
    }
    return Promise.reject(error);
  }
);

export default service;

2.1 配置基础 URL

在 axios.create 方法中，我们设置了 baseURL，这是所有请求的基础 URL。通常，我们会将这个值放在项目的 .env 文件中，以便在不同的环境中使用不同的 API 地址。

# .env.development
VUE_APP_BASE_API=http://localhost:3000/api

# .env.production
VUE_APP_BASE_API=https://api.example.com/api

2.2 请求拦截器

请求拦截器允许我们在请求发送之前对请求进行一些处理。例如，我们可以在请求头中添加 Authorization 字段，以便在请求中携带 token。

2.3 响应拦截器

响应拦截器允许我们在接收到响应之后对响应进行一些处理。例如，我们可以直接返回响应的 data 字段，而不是整个响应对象。此外，我们还可以根据不同的状态码进行不同的处理，例如在未授权时跳转到登录页面。

3. 封装 API 请求

在 api 文件夹中，我们可以创建一个 user.js 文件，用于封装与用户相关的 API 请求。

// src/api/user.js

import service from './axios';

// 获取用户信息
export function getUserInfo(userId) {
  return service.get(`/users/${userId}`);
}

// 更新用户信息
export function updateUserInfo(userId, data) {
  return service.put(`/users/${userId}`, data);
}

// 删除用户
export function deleteUser(userId) {
  return service.delete(`/users/${userId}`);
}

在这个文件中，我们封装了三个与用户相关的 API 请求：获取用户信息、更新用户信息和删除用户。每个函数都返回一个 Promise，因此我们可以在 Vue 组件中使用 async/await 来处理这些请求。

4. 在 Vue 组件中使用封装的 API

现在，我们可以在 Vue 组件中使用封装的 API 请求了。例如，在一个用户详情页面中，我们可以使用 getUserInfo 函数来获取用户信息。

<template>
  <div>
    <h1>用户详情</h1>
    <p>用户名: {{ user.name }}</p>
    <p>邮箱: {{ user.email }}</p>
    <button @click="updateUser">更新用户信息</button>
    <button @click="deleteUser">删除用户</button>
  </div>
</template>

<script>
import { getUserInfo, updateUserInfo, deleteUser } from '@/api/user';

export default {
  data() {
    return {
      user: {},
    };
  },
  async created() {
    // 获取用户信息
    const userId = this.$route.params.id;
    this.user = await getUserInfo(userId);
  },
  methods: {
    async updateUser() {
      const userId = this.$route.params.id;
      const updatedData = {
        name: 'New Name',
        email: 'newemail@example.com',
      };
      await updateUserInfo(userId, updatedData);
      this.user = await getUserInfo(userId);
    },
    async deleteUser() {
      const userId = this.$route.params.id;
      await deleteUser(userId);
      this.$router.push('/users');
    },
  },
};
</script>

在这个组件中，我们在 created 生命周期钩子中调用 getUserInfo 函数来获取用户信息，并在 updateUser 和 deleteUser 方法中分别调用 updateUserInfo 和 deleteUser 函数来更新和删除用户。

5. 处理全局错误

在实际项目中，我们可能需要在全局范围内处理某些错误，例如网络错误或服务器错误。我们可以在 Vue 实例中添加一个全局的错误处理函数。

// src/main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import service from './api/axios';

Vue.config.productionTip = false;

// 全局错误处理
Vue.prototype.$handleError = function (error) {
  if (error.response) {
    // 根据不同的状态码进行不同的处理
    switch (error.response.status) {
      case 401:
        // 未授权，跳转到登录页面
        router.push('/login');
        break;
      case 404:
        // 资源未找到
        console.error('请求的资源不存在');
        break;
      default:
        console.error('请求失败', error.response.data);
    }
  } else if (error.request) {
    // 请求已发出，但没有收到响应
    console.error('请求超时或网络错误', error.request);
  } else {
    // 其他错误
    console.error('请求配置错误', error.message);
  }
};

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

然后，我们可以在组件中使用 $handleError 方法来处理错误。

methods: {
  async updateUser() {
    const userId = this.$route.params.id;
    const updatedData = {
      name: 'New Name',
      email: 'newemail@example.com',
    };
    try {
      await updateUserInfo(userId, updatedData);
      this.user = await getUserInfo(userId);
    } catch (error) {
      this.$handleError(error);
    }
  },
  async deleteUser() {
    const userId = this.$route.params.id;
    try {
      await deleteUser(userId);
      this.$router.push('/users');
    } catch (error) {
      this.$handleError(error);
    }
  },
},

6. 总结

通过封装 Axios，我们可以在 Vue2 项目中更好地管理 API 请求，提高代码的可维护性和复用性。我们创建了一个 Axios 实例，并配置了请求和响应拦截器，以便在请求发送和响应接收时进行一些处理。然后，我们封装了与用户相关的 API 请求，并在 Vue 组件中使用这些封装的 API。最后，我们还添加了一个全局错误处理函数，以便在全局范围内处理某些错误。

通过这些步骤，我们可以更好地组织和管理 Vue2 项目中的 API 请求，使代码更加清晰和易于维护。