Vue3+vite 的福音：Axios 二次封装指南，让数据请求更简单

前端

2023-07-10 22:23:05

## 二次封装 Axios：在 Vue3 + Vite 中增强数据请求

在现代 Web 开发中，Axios 是一个广泛使用的 JavaScript 库，用于执行 HTTP 请求。但是，为了进一步简化和增强 Axios 在 Vue3 和 Vite 中的使用体验，二次封装是至关重要的。

## 什么是二次封装？

二次封装是将现有库或框架的功能重新包装为更适合特定环境或需求的定制化版本的过程。在 Axios 的情况下，二次封装可以带来以下好处：

简化代码： 封装后的 Axios 提供了更简洁的 API，让代码更加易读和易维护。
提高可复用性： 封装后的 Axios 可以被多个组件或页面复用，减少代码冗余。
增强灵活性： 封装后的 Axios 可以根据具体需求进行定制，满足不同的数据请求场景。

## 二次封装 Axios 的步骤

1. 安装依赖

npm install axios vite

2. 创建 Axios 实例

在 Vue3 的 main.js 文件中，创建一个 Axios 实例：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 10000,
})

3. 封装 Axios 方法

在 Vue3 项目中，创建一个名为 axios.js 的文件，并封装 Axios 方法：

import instance from './main.js'

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

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

// 其他方法依次类推

4. 在组件中使用封装后的 Axios 方法

在 Vue3 组件中，可以使用封装后的 Axios 方法发送数据请求：

import { get, post } from '@/axios'

export default {
  methods: {
    getData() {
      get('/api/data').then((res) => {
        console.log(res.data)
      })
    },

    postData() {
      post('/api/data', { name: 'John Doe' }).then((res) => {
        console.log(res.data)
      })
    },
  },
}