qidao123.com技术社区-IT企服评测·应用市场

标题: 重生之我在学Vue--第7天 Vue 3 数据请求（Axios） [打印本页]
作者: 曹旭辉    时间: 2025-3-26 00:54
标题: 重生之我在学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 实现流程图

     
总结与思考

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

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



欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/) Powered by Discuz! X3.4