

只要简单六步，搞定Vue3项目中的请求封装

前端新次元

2025-12-03

字数 714，阅读大约需 4 分钟

在开发 Vue3 项目时，经常需要与后端进行数据交互。Axios 是一个非常流行的库，可以帮助我们轻松地发送请求。为了提高代码的可维护性和复用性，我们需要对 Axios 进行封装。

为什么需要封装 Axios

• 统一管理：将所有请求集中在一个地方管理，方便修改和维护。
• 减少重复代码：避免在每个组件中重复写相同的请求配置。
• 错误处理：统一处理请求错误，提供更好的用户体验。
• 拦截器：通过拦截器添加全局功能，如 token 验证、请求日志等。

封装步骤

1. 安装 Axios

首先，需要安装 Axios。可以使用 npm 或 yarn 进行安装：


   npm install axios

或


   yarn add axios

2. 创建 Axios 实例

创建一个新的文件 api.js，在这个文件中创建 Axios 实例，并设置一些基础配置。


   import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.example.com', // 基础 URL
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json'
  }
})

export default instance

3. 添加请求拦截器

请求拦截器可以在请求发送前做一些处理，比如添加认证信息。


   instance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

4. 添加响应拦截器

响应拦截器可以在请求返回后做一些处理，比如处理错误状态码。


   instance.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return response.data
    } else {
      return Promise.reject(response)
    }
  },
  error => {
    if (error.response && error.response.status) {
      switch (error.response.status) {
        case 401:
          // 处理未授权的情况
          break
        case 403:
          // 处理禁止访问的情况
          break
        case 404:
          // 处理资源未找到的情况
          break
        default:
          console.error('Error:', error)
      }
    } else {
      console.error('Error:', error.message)
    }
    return Promise.reject(error)
  }
)

5. 封装常用请求方法

封装常用的 GET 和 POST 请求方法，方便在组件中调用。


   export const get = (url, params) => {
  return instance.get(url, { params })
}

export const post = (url, data) => {
  return instance.post(url, data)
}

6. 在组件中使用

在 Vue 组件中引入封装好的请求方法，并使用它们发送请求。


   import { get, post } from './api'

export default {
  data() {
    return {
      users: []
    }
  },
  methods: {
    fetchUsers() {
      get('/users')
        .then(response => {
          this.users = response
        })
        .catch(error => {
          console.error('Error fetching users:', error)
        })
    }
  },
  created() {
    this.fetchUsers()
  }
}