axios的使用以及封装

前言：

        在现代前端开发中，网络请求是不可避免的核心功能之一。无论是获取后端数据、提交表单信息，还是与第三方 API 交互，高效且可靠的 HTTP 请求库至关重要。axios 作为一款基于 Promise 的 HTTP 客户端，凭借其简洁的 API 设计、强大的拦截器机制以及广泛的浏览器和 Node.js 兼容性，成为开发者首选的工具之一。

        axios 不仅提供了基础的 GET、POST 等请求方法，还支持请求和响应的拦截、取消请求、自动转换 JSON 数据等特性，极大简化了开发流程。然而，在实际项目中直接使用原生 axios 可能会导致代码冗余、维护困难等问题。通过合理的封装，可以统一处理错误、设置全局配置、管理请求与响应逻辑，从而提升代码的可读性和可维护性。

        本文将详细介绍 axios 的基本使用方法，并探讨如何基于实际业务需求进行二次封装，使其更符合项目规范，同时兼顾灵活性和扩展性。无论是初学者还是有一定经验的开发者，都能从中获得实用的技巧和最佳实践。

1.axios请求接口

1.下载

npm install axios -S

2.引入

import axios from 'axios';

3.使用

        axios有两种使用方式，如下：

1.axios.'请求方式'
比如：axios.get()  axios.post

2.axios({
    url:'请求url',
    method:'请求方式，不给默认get请求',
    data:'post传值方式',
    params:'get传值方式'
}).then(res => {
    console.log( res ); // 后端给前端的数据
})

        比如我在优启梦API上找的免费API接口写的例子，如下：

<template>
  <div class="app">
    {{ data }}
  </div>
</template>

<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';

const data = ref('')

onMounted(() => {
  axios({
    url:'https://api.uomg.com/api/rand.qinghua?format=json',
    method:'get'
  }).then(res=>{
    data.value = res.data.content
  })
})
</script>

2.axios的二次封装

        axios的二次封装解决了什么问题：

        1.请求的url统一管理。

        2.配置统一的请求头。

        说白了axios的二次封装是为了方便管理和维护，首先我们需要在src目录下去创建一个工具文件夹（utils），在该文件夹下去创建一个js文件用来封装axios，命名为resquest.js。

        创建好之后，第一步就是要引入axios。第二步需要创建axios对象，用来管理统一的url路径。第三步需要设置请求拦截器，它可以在请求成功前去完成一些操作，比如添加请求头、设置loading动画等等。第四步是设置响应拦截器，它是请求完成了，后端返回给前端的数据，可以去处理http状态码等等。最后将我们创建的axios对象导出即可。基本代码如下：

// 1.引入axios
import axios from "axios";

// 2.创建axios对象
const service = axios.create({
    baseURL: 'https://api.uomg.com'
});

// 3.设置请求拦截器 请求前进行一些操作 比如添加请求头、设置loading动画等
service.interceptors.request.use(config => {
    return config;
}, err => {
    Promise.reject(error)
})

// 4.设置响应拦截器 后端给前端返回数据 可以处理http状态码
service.interceptors.response.use(
    (response) => {
        if (response.status === 200) {
            return response.data
        }
    },
    err => {
        return Promise.reject(new Error(err.response.data))
    }
)

export default service

        封装好之后，我们就可以对请求代码进行修改，代码如下：

<template>
  <div class="app">
    {{ data }}
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import request from './utils/request';

const data = ref('')

onMounted(() => {
  request({
    // 只需要添加参数
    url: '/api/rand.qinghua?format=json',
  }).then(res => {
    data.value = res.content
  })
})
</script>

3.解偶

        当项目中可能一个请求会在多个地方用到是，就需要统一管理。

        在utils文件夹下新建api文件夹的目的在于将接口请求与业务逻辑彻底解耦，实现接口的集中管理和复用。这种架构设计主要解决以下问题：

1. 接口复用性：避免同一接口在不同组件重复定义
2. 维护便捷性：接口路径或参数变更时只需修改单个文件
3. 语义化调用：通过命名清晰的函数替代原始URL字符串
4. 类型提示支持：配合TypeScript可获得更好的代码提示

import request from '../request';

export function getQingHua(){
    return request({
        url: '/api/rand.qinghua?format=json',
    })
}

        修改原组件代码为：

<template>
  <div class="app">
    {{ data }}
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getQingHua } from './utils/api/course';

const data = ref('')

onMounted(() => {
  getQingHua().then(res => {
    data.value = res.data
  })
})
</script>

这种架构设计使项目具备以下优势：

• 接口与业务逻辑完全分离
• 团队成员协作更规范
• 接口变更影响范围可控
• 代码可测试性增强
• 类型系统更完善

结语：

        axios 作为现代前端开发的核心工具，其灵活性和强大功能为 HTTP 请求处理提供了高效解决方案。通过原生使用和二次封装，开发者能够根据项目需求实现从基础到进阶的请求管理。封装后的代码不仅提升了可维护性，还通过统一配置和拦截机制增强了健壮性。接口解耦进一步优化了项目结构，使团队协作更加规范。掌握这些技巧将显著提升开发效率和代码质量，为复杂应用奠定坚实基础。