2-4 axios 调后端接口

这一章你会很熟悉——前端调后端接口。前端最常用的 HTTP 库是 axios(类似你后端的 HttpClient / RestTemplate / OkHttp)。

配套代码:vue-demo/src/api/request.js(封装)和 views/UsersView.vue、UserDetailView.vue(使用)。

---

1. 安装与最简用法

npm install axios

import axios from 'axios'

// GET
const res = await axios.get('https://api.example.com/users')
console.log(res.data)   // 注意:响应体在 res.data 里

// POST
const res2 = await axios.post('https://api.example.com/users', {
  name: '张三', age: 30,    // 请求体(会自动序列化成 JSON)
})

// 带查询参数的 GET:?page=1&size=10
const res3 = await axios.get('/users', { params: { page: 1, size: 10 } })

要点:

• axios 返回一个 Promise,用 await 拿结果(回顾 0-3)。
• 响应数据在 res.data(axios 把你的接口返回包了一层,真正的 body 在 data 里)。

---

2. 实战写法:封装一个请求实例(几乎所有项目都这么做)

直接到处 axios.get('完整url') 不好维护。标准做法是封装一个实例,统一配置 baseURL、超时、拦截器。

src/api/request.js:

import axios from 'axios'

const request = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // 统一前缀,调用时只写后半段
  timeout: 10000,                                   // 超时
})

// 请求拦截器:每个请求发出前都会经过这里(常用于加 token)
request.interceptors.request.use((config) => {
  const token = localStorage.getItem('token')
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
})

// 响应拦截器:每个响应回来都会经过这里(常用于统一取 data、统一处理错误)
request.interceptors.response.use(
  (response) => response.data,    // 直接返回 data,调用处就不用每次写 .data 了
  (error) => {
    console.error('请求失败:', error)
    // 这里可统一处理:401 跳登录、弹个错误提示等
    return Promise.reject(error)
  }
)

export default request

后端类比:拦截器 ≈ HTTP 请求的 过滤器 / 切面。请求拦截器统一加 Header(如认证 token),响应拦截器统一剥壳、统一错误处理。这是前端工程化的标准操作,值得记住。

---

3. 按模块组织 API(推荐)

把接口按业务分文件,而不是在组件里写裸 URL:

src/api/user.js:

import request from './request'

export function getUsers() {
  return request.get('/users')
}
export function getUser(id) {
  return request.get(`/users/${id}`)
}
export function createUser(data) {
  return request.post('/users', data)
}

后端类比:这就像把接口调用收拢到一层「ApiClient / Feign 接口」,组件只管调函数,不关心 URL 细节。

---

4. 在组件里调用(标准套路)

结合 1-5 的 onMounted,这是列表页的黄金模板:

<script setup>
import { ref, onMounted } from 'vue'
import { getUsers } from '../api/user'

const users = ref([])
const loading = ref(true)
const error = ref('')

onMounted(async () => {
  try {
    users.value = await getUsers()   // 因为响应拦截器返回了 data,这里直接拿到数组
  } catch (e) {
    error.value = '加载失败,请重试'
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <div v-if="loading">加载中…</div>
  <div v-else-if="error">{{ error }}</div>
  <ul v-else>
    <li v-for="u in users" :key="u.id">{{ u.name }}</li>
  </ul>
</template>

记住这套三态模板:loading(加载中)/ error(出错)/ 正常数据。真实项目几乎每个请求都这样处理。

---

5. 跨域问题与 Vite 代理(开发阶段常见)

开发时前端跑在 localhost:5173,后端在别的地址,浏览器会因同源策略报跨域(CORS)错误。开发阶段常用 Vite 代理绕过:

vite.config.js:

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      // 所有 /api 开头的请求,转发到后端,浏览器以为还是同源
      '/api': {
        target: 'http://localhost:8080',  // 你的后端地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
})

然后 axios 的 baseURL 设成 /api,请求 /api/users 会被 Vite 转发到 http://localhost:8080/users。

后端同学注意:生产环境的跨域要靠后端配置 CORS 响应头,或用 Nginx 反向代理。Vite 代理只在本地开发生效。

---

动手练习(用 vue-demo)

1. 跑项目,进「用户」页,它在 onMounted 里用 axios 拉了一组用户(来自公开测试接口 jsonplaceholder)。
2. 打开 F12 → Network 面板,刷新页面,看到那条 /users 请求,点开看响应 JSON(像后端看接口返回)。
3. 看 src/api/request.js 的响应拦截器如何 return response.data,体会调用处为什么不用写 .data。
4. 点某个用户进详情页,看它用 getUser(id) 拉单个用户(route.params.id + axios)。

---

小结

• axios 调接口:get/post,await 拿结果,数据在 res.data。
• 封装 request 实例 + 拦截器(统一 baseURL、加 token、剥 data、处理错误)是标准操作。
• 按模块把接口收到 api/*.js,组件只调函数。
• 列表请求用 loading / error / 数据 三态模板。
• 本地跨域用 Vite server.proxy 代理。

➡️ 下一章:2-5 打包与部署