vue3 axios（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代前端开发中，数据交互是构建动态网页的核心能力之一。Vue 3 作为新一代主流框架，凭借其响应式系统和组合式 API，为开发者提供了高效构建用户界面的工具。而 Axios 则是前端领域广泛应用的 HTTP 客户端库，它简化了网络请求的复杂性，让开发者能够轻松与后端 API 通信。本文将深入探讨 Vue3 与 Axios 的结合使用，通过分步骤讲解、代码示例和实际案例，帮助编程初学者和中级开发者快速掌握这一技能组合。

一、Axios 的核心概念与优势

1.1 什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 客户端，主要用于浏览器和 Node.js 环境中发送 HTTP 请求。它支持 GET、POST、PUT、DELETE 等常见方法，并提供了拦截请求和响应、自动转换 JSON 数据等功能。与原生的 fetch API 相比，Axios 的优势在于：

• 更简洁的 API 设计：统一的 then/catch 语法，避免了 fetch 需要多次调用 .json() 的繁琐操作。
• 拦截器（Interceptors）：可以在请求发送前或响应接收后执行自定义逻辑，例如添加认证 Token 或统一处理错误。
• 取消请求：支持通过 CancelToken 取消重复或不再需要的请求，减少资源浪费。

1.2 为什么在 Vue3 中使用 Axios？

Vue3 本身不包含网络请求的功能，因此需要借助第三方库完成数据交互。Axios 的轻量级特性（仅约 5KB 的压缩体积）和与 Vue3 的无缝兼容性，使其成为 Vue 项目的首选方案。此外，通过结合 Vue3 的响应式系统，可以轻松实现数据驱动视图更新的效果。

二、在 Vue3 项目中安装与配置 Axios

2.1 安装 Axios

在 Vue3 项目中，可以通过 npm 或 yarn 安装 Axios：

npm install axios  
yarn add axios  

2.2 创建 Axios 实例

为避免重复配置，通常会创建一个全局的 Axios 实例，集中管理基础 URL、请求头等参数。例如：

// src/api/index.js  
import axios from 'axios';  

const instance = axios.create({  
  baseURL: 'https://api.example.com/v1', // 后端 API 的基础路径  
  timeout: 5000, // 请求超时时间（毫秒）  
  headers: {  
    'Content-Type': 'application/json',  
    'X-Custom-Header': 'Vue3-Axios' // 自定义请求头  
  }  
});  

export default instance;  

2.3 在 Vue 组件中使用实例

在需要发送请求的组件中，可以通过引入全局实例来调用方法：

<template>  
  <div>  
    <button @click="fetchData">获取数据</button>  
    <div v-if="data">  
      <p>返回的数据显示：{{ data }}</p>  
    </div>  
  </div>  
</template>  

<script setup>  
import axiosInstance from '@/api/index.js';  
import { ref } from 'vue';  

const data = ref(null);  

const fetchData = async () => {  
  try {  
    const response = await axiosInstance.get('/endpoint');  
    data.value = response.data;  
  } catch (error) {  
    console.error('请求失败:', error);  
  }  
};  
</script>  

三、核心功能详解：GET、POST 请求与错误处理

3.1 发送 GET 请求

GET 请求用于从服务器获取数据。例如，获取用户列表：

// 发送 GET 请求  
axiosInstance.get('/users', {  
  params: {  
    page: 1,  
    limit: 10 // 查询参数  
  }  
})  
.then(response => {  
  console.log('用户列表:', response.data);  
})  
.catch(error => {  
  console.error('获取用户失败:', error);  
});  

3.2 发送 POST 请求

POST 请求用于向服务器提交数据，例如创建新用户：

// 发送 POST 请求  
const newUser = {  
  name: 'John Doe',  
  email: 'john@example.com'  
};  

axiosInstance.post('/users', newUser)  
.then(response => {  
  console.log('创建成功:', response.data);  
})  
.catch(error => {  
  console.error('创建失败:', error);  
});  

3.3 统一错误处理

通过拦截器，可以集中处理所有请求的错误，例如：

// 添加响应拦截器  
axiosInstance.interceptors.response.use(  
  response => response, // 成功时直接返回响应  
  error => {  
    if (error.response) {  
      const status = error.response.status;  
      if (status === 401) {  
        console.log('身份验证失败，跳转登录页');  
      } else if (status === 404) {  
        console.log('资源未找到');  
      }  
    }  
    return Promise.reject(error);  
  }  
);  

四、高级技巧：拦截器与请求取消

4.1 拦截器的扩展应用

拦截器可以用于添加认证 Token 或日志记录。例如，在请求头中动态添加 Token：

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

4.2 取消重复请求

在搜索输入框实时请求数据时，若用户快速输入，可能会触发多个请求。通过 CancelToken 可以取消未完成的请求：

import { ref } from 'vue';  

const source = ref(axios.CancelToken.source());  

const search = async (query) => {  
  try {  
    // 取消前一个请求（如果存在）  
    source.value.cancel('请求已取消');  
    // 创建新 CancelToken  
    source.value = axios.CancelToken.source();  

    const response = await axiosInstance.get('/search', {  
      params: { q: query },  
      cancelToken: source.value.token  
    });  
    console.log('搜索结果:', response.data);  
  } catch (thrown) {  
    if (axios.isCancel(thrown)) {  
      console.log('请求被取消:', thrown.message);  
    } else {  
      console.error('搜索失败:', thrown);  
    }  
  }  
};  

五、实战案例：构建一个简单的用户管理模块

5.1 需求分析

假设需要实现一个用户管理页面，包含以下功能：

• 获取用户列表
• 添加新用户
• 删除用户

5.2 实现步骤

5.2.1 创建 API 接口文件

在 src/api/users.js 中定义用户相关请求：

import axiosInstance from './index.js';  

export const fetchUsers = () => axiosInstance.get('/users');  
export const createUser = (user) => axiosInstance.post('/users', user);  
export const deleteUser = (id) => axiosInstance.delete(`/users/${id}`);  

5.2.2 在组件中使用 API

在 Vue 组件中调用上述方法：

<template>  
  <div>  
    <h2>用户列表</h2>  
    <button @click="addUser">添加用户</button>  
    <ul>  
      <li v-for="user in users" :key="user.id">  
        {{ user.name }}  
        <button @click="() => deleteUser(user.id)">删除</button>  
      </li>  
    </ul>  
  </div>  
</template>  

<script setup>  
import { ref, onMounted } from 'vue';  
import { fetchUsers, createUser, deleteUser } from '@/api/users.js';  

const users = ref([]);  

// 页面加载时获取用户列表  
onMounted(async () => {  
  const response = await fetchUsers();  
  users.value = response.data;  
});  

const addUser = async () => {  
  const newUser = { name: 'Alice', email: 'alice@example.com' };  
  const response = await createUser(newUser);  
  users.value.push(response.data);  
};  

const handleDelete = async (id) => {  
  await deleteUser(id);  
  users.value = users.value.filter(user => user.id !== id);  
};  
</script>  

六、常见问题与解决方案

6.1 跨域问题（CORS）

当前端与后端的域名不一致时，浏览器会阻止请求。解决方案包括：

• 在后端配置 CORS 头，允许特定域名访问。
• 在开发环境使用代理（Vue CLI 配置 vue.config.js）。

6.2 请求超时

若请求响应过慢，可通过调整 timeout 参数或优化后端性能解决：

// 在 Axios 实例中设置超时时间  
axios.create({ timeout: 10000 }); // 10秒超时  

6.3 数据格式不匹配

若后端返回的数据格式不符合预期，可通过 responseType 指定格式：

axiosInstance.get('/file', { responseType: 'blob' }); // 下载二进制文件  

七、最佳实践与性能优化

7.1 封装公共方法

将重复的逻辑封装为工具函数或 Mixin，例如：

// 工具函数：统一处理 API 错误  
const handleAPIError = (error) => {  
  if (error.response.status === 500) {  
    alert('服务器内部错误，请稍后再试');  
  }  
};  

7.2 使用 Keep-Alive 缓存请求

对于高频次的相同请求（如搜索建议），可以使用缓存：

const cache = {};  

const fetchWithCache = async (url) => {  
  if (cache[url]) {  
    return cache[url]; // 返回缓存结果  
  }  
  const response = await axiosInstance.get(url);  
  cache[url] = response.data;  
  return response.data;  
};  

7.3 按需加载与代码分割

在大型项目中，通过动态导入（import()）实现代码分割，减少初始加载时间：

// 按需加载 API 模块  
const loadUsersAPI = () => import('@/api/users.js');  

结论

通过本文的学习，读者已经掌握了在 Vue3 中使用 Axios 的核心方法，包括基础请求、拦截器、错误处理和实战案例。无论是构建简单的数据展示页面，还是复杂的用户管理系统，Vue3 与 Axios 的结合都能提供高效且灵活的解决方案。

对于初学者，建议从简单案例入手，逐步尝试拦截器、请求取消等高级功能；中级开发者则可以探索与 Vuex 状态管理的集成，或通过 TypeScript 增强代码的健壮性。持续实践并结合官方文档，将帮助开发者在前端数据交互领域游刃有余。

Vue3 与 Axios 的结合，不仅简化了代码逻辑，还提升了开发效率。希望本文能成为你技术成长路上的一块坚实基石，未来在更复杂的项目中，也能自信地应对数据交互的挑战。