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

重生之我在学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 安装与全局配置

1. npm install axios

复制代码

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

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

复制代码

1.2 四大请求方法实战

GET 请求：获取任务列表

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

复制代码

POST 请求：新增任务

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

复制代码

PUT & DELETE 请求：更新与删除

1. // 更新任务
2. const updateTask = async (id, newData) => {
3.   await service.put(`/tasks/${id}`, newData)
4. }
6. // 删除任务
7. const deleteTask = async (id) => {
8.   await service.delete(`/tasks/${id}`)
9. }

复制代码

---

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

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

1. service.interceptors.request.use(
2.   config => {
3.     const token = localStorage.getItem('token')
4.     if (token) {
5.       config.headers.Authorization = `Bearer ${token}`
6.     }
7.     return config
8.   },
9.   error => Promise.reject(error)
10. )

复制代码

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

1. service.interceptors.response.use(
2.   response => {
3.     // 处理标准响应结构
4.     if (response.data.code === 200) {
5.       return response.data
6.     } else {
7.       return Promise.reject(response.data.message)
8.     }
9.   },
10.   error => {
11.     // 处理 HTTP 状态码异常
12.     if (error.response.status === 401) {
13.       router.push('/login')
14.     }
15.     return Promise.reject(error)
16.   }
17. )

复制代码

---

三、Axios + Pinia 黄金组合

3.1 在 Store 中封装 API 调用

1. // stores/task.js
2. import { defineStore } from 'pinia'
3. import service from '@/utils/request'
5. export const useTaskStore = defineStore('task', {
6.   actions: {
7.     async fetchTasks() {
8.       try {
9.         const res = await service.get('/tasks')
10.         this.tasks = res.data
11.       } catch (error) {
12.         console.error('加载任务失败:', error)
13.       }
14.     },
15.     async addTask(task) {
16.       await service.post('/tasks', task)
17.       this.fetchTasks() // 自动刷新列表
18.     }
19.   }
20. })

复制代码

3.2 组件中优雅调用

1. <script setup>
2. import { useTaskStore } from '@/stores/task'
4. const taskStore = useTaskStore()
6. // 初始化加载数据
7. onMounted(() => {
8.   taskStore.fetchTasks()
9. })
11. // 提交新任务
12. const handleSubmit = async () => {
13.   await taskStore.addTask(newTask.value)
14. }
15. </script>

复制代码

---

四、实战任务：集成 RESTful API

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

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

复制代码

4.2 完整 CRUD 实现流程图

     

---

总结与思考

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。