Vue3 Ajax(axios)（保姆级教程）

Vue3 Ajax(axios) 入门与实战：从零开始掌握前端数据交互

在现代 Web 开发中，前端页面不再只是静态展示内容，而是需要与后端服务器进行动态数据交换。Vue 3 作为当前主流的前端框架，其组合式 API 提供了强大的响应式能力，而搭配 Axios 库进行 Ajax 请求，则是实现前后端通信的标准方案。本文将带你一步步掌握 Vue3 Ajax(axios) 的核心用法，无论你是初学者还是有一定经验的开发者，都能从中获得实用价值。

安装与配置 Axios

在使用 Axios 之前，首先要确保它已正确安装到项目中。如果你使用的是 Vue CLI 或 Vite 构建的项目，可以通过 npm 或 yarn 安装：

npm install axios

安装完成后，你就可以在项目中引入 Axios。建议在项目根目录创建一个 utils/request.js 文件，用于统一配置 Axios，这样能避免在多个组件中重复写配置。

// utils/request.js
import axios from 'axios'

// 创建一个 Axios 实例，设置基础路径
const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // 示例接口地址
  timeout: 10000, // 请求超时时间，单位毫秒
  headers: {
    'Content-Type': 'application/json' // 设置默认请求头
  }
})

// 请求拦截器：在请求发出前做处理
instance.interceptors.request.use(
  config => {
    // 例如：添加 token 到请求头
    // const token = localStorage.getItem('token')
    // if (token) config.headers.Authorization = `Bearer ${token}`
    console.log('请求发送前：', config.url)
    return config
  },
  error => {
    console.error('请求错误：', error)
    return Promise.reject(error)
  }
)

// 响应拦截器：在响应返回后处理数据
instance.interceptors.response.use(
  response => {
    console.log('响应成功：', response.data)
    return response.data // 只返回 data 部分，简化后续处理
  },
  error => {
    console.error('响应错误：', error.response?.data || error.message)
    return Promise.reject(error)
  }
)

export default instance

💡 小贴士：拦截器就像“快递员的安检系统”，请求发出前检查包裹是否合规，响应回来后检查内容是否完整，能有效统一处理错误和认证逻辑。

在 Vue 3 组件中使用 Axios

接下来，我们创建一个简单的组件来演示如何在 Vue 3 中发起 Ajax 请求。使用 <script setup> 语法糖，代码更简洁。

<!-- components/UserList.vue -->
<template>
  <div class="user-list">
    <h2>用户列表</h2>
    <div v-if="loading">加载中...</div>
    <ul v-else>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
    <button @click="fetchUsers">刷新数据</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request' // 引入配置好的 Axios 实例

// 定义响应式数据
const users = ref([]) // 存储用户数据
const loading = ref(false) // 控制加载状态

// 发起请求获取用户列表
const fetchUsers = async () => {
  loading.value = true // 开启加载状态
  try {
    // 调用 Axios 实例发起 GET 请求
    const response = await request.get('/users')
    users.value = response // 接口返回的数据直接赋值给 users
  } catch (error) {
    console.error('获取用户失败：', error)
    users.value = [] // 出错时清空数据
  } finally {
    loading.value = false // 无论成功失败都关闭加载状态
  }
}

// 组件挂载后自动请求数据
onMounted(() => {
  fetchUsers()
})
</script>

<style scoped>
.user-list {
  margin: 20px;
  font-family: 'Arial', sans-serif;
}
</style>

✅ 关键点解析：

• ref() 创建响应式变量，Vue 3 中替代 data()。
• onMounted() 是生命周期钩子，组件渲染完成后执行。
• await request.get('/users') 是异步调用，必须用 async/await。
• 使用 try/catch/finally 处理异常和状态管理，是健壮代码的标配。

发送 POST 请求与表单数据处理

除了获取数据，我们经常需要向服务器提交表单。比如注册新用户，就需要发送 POST 请求。

// 示例：提交用户注册表单
const registerUser = async (userData) => {
  try {
    const response = await request.post('/users', userData)
    alert('注册成功！用户 ID：' + response.id)
    return response
  } catch (error) {
    const errorMsg = error.response?.data?.message || '注册失败'
    alert('错误：' + errorMsg)
    return null
  }
}

📌 注意：userData 应该是一个对象，如：

const newUser = {
  name: '张三',
  email: 'zhangsan@example.com',
  username: 'zhangsan'
}

如果你需要发送 FormData（例如上传文件），可以这样设置：

const uploadFile = async (file) => {
  const formData = new FormData()
  formData.append('file', file)
  formData.append('description', '这是测试文件')

  try {
    const response = await request.post('/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data' // 必须显式设置
      }
    })
    console.log('上传成功：', response)
  } catch (error) {
    console.error('上传失败：', error)
  }
}

🔍 形象比喻：POST 请求就像“快递寄送”，你把包裹（数据）放进快递箱，填写收件人（接口地址），然后交给快递公司（Axios）运输。

错误处理与全局状态管理

在真实项目中，网络请求失败是常态。我们不能让页面“卡死”或“空白”，必须做好错误处理。

常见错误类型

全局错误提示方案（使用 Vue 3 的 Provide/Inject）

在 main.js 或 main.ts 中：

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

const app = createApp(App)
app.use(createPinia())

// 全局错误提示函数
app.config.globalProperties.$showError = (msg) => {
  alert('错误：' + msg)
}

app.mount('#app')

在组件中调用：

const fetchUsers = async () => {
  try {
    const response = await request.get('/users')
    users.value = response
  } catch (error) {
    // 使用全局方法提示错误
    app.config.globalProperties.$showError(
      error.response?.data?.message || '数据加载失败'
    )
  }
}

✅ 这种方式可以避免在每个组件中重复写 alert，提高代码复用性。

高级用法：封装请求模块与 API 分离

随着项目变大，直接在组件中写请求会变得混乱。建议将所有接口定义为独立模块。

创建 API 模块

// api/user.js
import request from '@/utils/request'

export const getUserList = () => request.get('/users')
export const getUserById = (id) => request.get(`/users/${id}`)
export const createUser = (userData) => request.post('/users', userData)
export const updateUser = (id, userData) => request.put(`/users/${id}`, userData)
export const deleteUser = (id) => request.delete(`/users/${id}`)

在组件中调用

import { getUserList, createUser } from '@/api/user'

const fetchUsers = async () => {
  try {
    const users = await getUserList()
    users.value = users
  } catch (error) {
    $showError('加载失败')
  }
}

const handleRegister = async () => {
  const newUser = { name: '李四', email: 'lisi@example.com' }
  await createUser(newUser)
}

✅ 优势：代码职责清晰，便于维护、测试和团队协作。就像“菜谱”与“厨房”的分离，厨师（组件）只负责“炒菜”，而“菜谱”由专人维护。

总结与建议

Vue3 Ajax(axios) 是构建现代化前端应用的基石。通过合理使用 Axios 实例、拦截器、错误处理和模块化封装，你可以写出高效、可维护的代码。

• 初学者：先掌握 GET 和 POST 基本用法，理解 async/await。
• 中级开发者：学会封装请求、使用拦截器、统一错误处理。
• 高级用户：结合 Pinia 状态管理、TypeScript 类型安全，构建企业级应用。

记住，优秀的代码不是“能跑”，而是“好维护、易扩展、容错强”。从今天起，用 Vue3 Ajax(axios) 写出更优雅的请求逻辑吧！

本文所有代码均可直接运行在 Vue 3 项目中，请确保项目已正确配置 Axios 和构建工具。实践是掌握技术的唯一途径，动手试试看！