第九章：Axios — 网络请求

前端页面上的数据（商品列表、聊天记录、AI 的回复……）几乎都来自后端服务器。这一章讲怎么优雅地”去后端要数据”。

9.1 回顾入门用的 fetch

入门篇里，我们用浏览器自带的 fetch 取数据：

const res = await fetch('/api/data')
const data = await res.json()

fetch 能用，但有点”糙”，几个不方便的地方：

• 要手动调用 .json() 才能拿到数据
• 服务器返回 404、500 错误时，它不会自动报错，得自己判断
• 想统一给所有请求加个东西（比如登录 token）比较麻烦

于是，绝大多数项目会用一个更好用的库：Axios。

9.2 Axios 好在哪

Axios 是一个专门用来发网络请求的第三方库，是 fetch 的”豪华升级版”。

它的好处：

一句话：Axios 让网络请求写起来更简单、更省心。

9.3 基础用法

安装

npm install axios

发一个 GET 请求（取数据）

import axios from 'axios'

async function getUsers() {
  const res = await axios.get('https://xxx.com/api/users')
  console.log(res.data)   // 数据直接在 res.data 里，不用手动转 JSON
}

注意：Axios 把服务器返回的数据放在 res.data 里，这是最常用的属性。

发一个 POST 请求（提交数据）

async function sendMessage() {
  const res = await axios.post('https://xxx.com/api/chat', {
    message: '你好，AI'      // 第二个参数就是要发送的数据
  })
  console.log(res.data)
}

• axios.get(url) — 获取数据
• axios.post(url, 数据) — 提交数据
• 还有 put（更新）、delete（删除），用法类似

9.4 实用技巧

真实项目里，一般会先做一个”配置好的 axios 实例”，统一管理。新建 src/utils/request.js：

import axios from 'axios'

// 创建一个实例，统一配置
const request = axios.create({
  baseURL: 'https://xxx.com/api',   // 统一的接口前缀
  timeout: 10000                    // 超时时间 10 秒
})

// 请求拦截器：每次请求自动加上 token
request.interceptors.request.use((config) => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

export default request

这样做的两个好处：

① baseURL：接口地址不用每次写全

配了 baseURL 后，调用时只写后半段：

import request from '../utils/request'

request.get('/users')       // 实际请求 https://xxx.com/api/users
request.post('/chat', {...}) // 实际请求 https://xxx.com/api/chat

② 拦截器：统一处理

拦截器就像一个”关卡”，所有请求发出前、所有响应回来后，都会先经过它。常见用途：

• 请求拦截器：给每个请求自动加上登录 token（上面的例子）
• 响应拦截器：统一处理错误（比如 token 过期就自动跳登录页）

这样就不用在每个请求里重复写这些逻辑了。

9.5 结合 Vue

最常见的场景：页面一加载，就去后端拿数据显示出来。配合入门篇学过的 onMounted 生命周期：

<script setup>
import { ref, onMounted } from 'vue'
import request from '../utils/request'

const users = ref([])   // 存放用户列表

// 组件一挂载完成，就请求数据
onMounted(async () => {
  const res = await request.get('/users')
  users.value = res.data   // 拿到数据，塞进响应式变量
})
</script>

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>

流程串起来：页面加载 → onMounted 触发 → Axios 请求数据 → 存进 ref → 页面自动渲染出列表。这就是绝大多数”列表页”的标准套路。

9.6 小结

• 浏览器自带的 fetch 能用但”糙”，实际项目多用 Axios
• Axios 的优势：自动转 JSON、自动报错、支持 baseURL 和 拦截器
• 基础用法：
  • axios.get(url) 取数据（数据在 res.data）
  • axios.post(url, 数据) 提交数据
• 实用技巧：用 axios.create() 建实例，统一配 baseURL 和拦截器（自动加 token / 统一处理错误）
• 结合 Vue：在 onMounted 里请求数据，存进 ref，页面自动渲染

最后一章，我们聊聊怎么让界面又快又好看 —— 别再手搓按钮了，用组件库！