重生之我在学Vue–第7天 Vue 3 数据请求（Axios）

前言

数据交互是前后端分离开发的核心环节，Axios 作为 Vue 生态中最流行的 HTTP 客户端，能帮助我们高效管理异步请求。今天的重点是在 Vue 3 中集成 Axios，并结合 Pinia 状态管理实现数据流的闭环。

Vue3 官方中文文档传送点： 简介 | Vue.js

Vue3 的中文官方文档学习笔记很全还有练习场，推荐去官网学习

Vue前端成仙之路：Vue 前端成仙之路_野生的程序媛的博客-CSDN博客

GO后端成神之路：Go 后端成神之路_野生的程序媛的博客-CSDN博客

---

一、Axios 基础：从安装到实战

1.1 安装与全局配置

npm install axios

在 src/utils 目录下创建 request.js，配置全局实例：

import axios from 'axios'// 创建 Axios 实例
const service = axios.create({baseURL: 'https://your-api-domain.com', // 接口基础路径timeout: 10000, // 超时时间headers: { 'Content-Type': 'application/json' } // 公共请求头
})export default service

1.2 四大请求方法实战

GET 请求：获取任务列表

// 在组件中调用
import service from '@/utils/request'const fetchTasks = async () => {try {const response = await service.get('/tasks')console.log(response.data)} catch (error) {console.error('请求失败:', error)}
}

POST 请求：新增任务

const addTask = async (taskData) => {await service.post('/tasks', taskData)
}

PUT & DELETE 请求：更新与删除

// 更新任务
const updateTask = async (id, newData) => {await service.put(`/tasks/${id}`, newData)
}// 删除任务
const deleteTask = async (id) => {await service.delete(`/tasks/${id}`)
}

---

二、拦截器：打造智能请求管道

2.1 请求拦截器（统一添加 Token）

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

2.2 响应拦截器（统一错误处理）

service.interceptors.response.use(response => {// 处理标准响应结构if (response.data.code === 200) {return response.data} else {return Promise.reject(response.data.message)}},error => {// 处理 HTTP 状态码异常if (error.response.status === 401) {router.push('/login')}return Promise.reject(error)}
)

---

三、Axios + Pinia 黄金组合

3.1 在 Store 中封装 API 调用

// stores/task.js
import { defineStore } from 'pinia'
import service from '@/utils/request'export const useTaskStore = defineStore('task', {actions: {async fetchTasks() {try {const res = await service.get('/tasks')this.tasks = res.data} catch (error) {console.error('加载任务失败:', error)}},async addTask(task) {await service.post('/tasks', task)this.fetchTasks() // 自动刷新列表}}
})

3.2 组件中优雅调用

<script setup>
import { useTaskStore } from '@/stores/task'const taskStore = useTaskStore()// 初始化加载数据
onMounted(() => {taskStore.fetchTasks()
})// 提交新任务
const handleSubmit = async () => {await taskStore.addTask(newTask.value)
}
</script>

---

四、实战任务：集成 RESTful API

4.1 接口模拟（使用 Mock.js）

// mock/task.js
import Mock from 'mockjs'Mock.mock('/tasks', 'get', {'code': 200,'data|5-10': [{'id|+1': 1,'title': '@ctitle','completed': '@boolean'}]
})

4.2 完整 CRUD 实现流程图

---

总结与思考

1. 分层架构思维：将请求逻辑封装在 Store 层，保持组件专注 UI 交互
2. 错误处理标准化：通过拦截器实现统一的异常处理流程
3. 性能优化方向：
   • 添加请求取消功能（避免重复请求）
   • 实现接口级缓存（减少重复请求）

明日预告：Day8 将引入 Element Plus，为我们的任务管理系统打造专业级 UI 界面！