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

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 界面！