高效封装Axios：让Vue项目请求管理更轻松！

2022-12-18 12:33:06

在 Vue.js 中封装 Axios 请求的必要性

在 Vue.js 应用中使用 Axios 进行数据请求是再常见不过的事情了。然而，随着项目规模的扩大，你会发现自己一遍又一遍地编写相同的请求代码，代码冗余、可读性差、维护困难的问题也随之而来。为了解决这些痛点，封装 Axios 请求 应运而生。

封装 Axios 请求的优点

封装 Axios 请求可以为你的项目带来诸多好处：

代码简洁： 将重复的请求代码集中到一个模块中，避免了代码冗余。
可读性强： 请求代码集中在一起，便于阅读和理解整个应用的请求逻辑。
维护方便： 当需要修改请求时，只需在封装模块中进行修改即可，大大提高了维护效率。

如何封装 Axios 请求

封装 Axios 请求的方法有很多，这里介绍一种简单实用的方法：

创建请求模块： 创建一个单独的 JavaScript 模块，例如 request.js，用于封装请求。
引入 Axios 库： 在 request.js 模块中，引入 Axios 库。
定义请求函数： 定义一个请求函数，例如 request()，它接收两个参数：请求配置对象和请求数据。
发起请求： 在 request() 函数中，使用 Axios 发起请求，并返回请求结果。
使用请求模块： 在需要使用请求的地方，导入 request.js 模块并调用 request() 函数即可。

示例代码：

// request.js
import axios from 'axios'

export default function request(config) {
  // 设置默认请求配置
  const defaultConfig = {
    baseURL: 'http://localhost:3000',
    timeout: 5000
  }

  // 合并请求配置
  const mergedConfig = Object.assign(defaultConfig, config)

  // 发起请求
  return axios(mergedConfig)
}

// 页面组件
import request from '@/utils/request'

export default {
  methods: {
    async getData() {
      const res = await request({
        url: '/api/data'
      })
      console.log(res.data)
    }
  }
}