Vue3 Ajax(axios)

现代前端页面几乎都要与后端交换数据：登录校验、列表加载、表单提交，样样离不开网络请求。原生 XMLHttpRequest 语法繁琐，fetch 又偏底层，于是基于 Promise 的 axios 成为 Vue 项目中最常用的 Ajax 库。它同时支持浏览器与 Node.js，拦截器、取消请求等能力开箱即用，是连接 Vue 组件与后端接口的桥梁。

安装 axios

在 Vue 项目根目录执行下面的命令安装依赖：

npm install axios

安装完成后，在组件或工具文件中直接 import 即可使用。

GET 请求

GET 用于获取数据，查询参数通过 params 选项传递：

import axios from 'axios'

axios.get('https://api.example.com/users', {
  params: { page: 1, size: 10 }
}).then((res) => {
  console.log(res.data) // 输出：第 1 页的用户列表
}).catch((err) => {
  console.error('请求失败：' + err.message) // 输出：请求失败：xxx
})

axios 的响应对象里，data 字段就是服务端返回的业务数据，注释中的输出可在浏览器控制台看到。

POST 请求

POST 用于提交数据，第二个参数直接传对象，axios 会自动序列化为 JSON：

axios.post('/api/login', {
  username: 'zhangsan',
  password: '123456'
}).then(({ data }) => {
  console.log(data.token) // 输出：服务端签发的登录令牌
})

解构出 data 后直接使用返回字段，代码更简洁。

在组件中加载列表

配合 Vue3 的响应式数据与生命周期钩子，把请求封装成 async 函数：

import { ref, onMounted } from 'vue'
import axios from 'axios'

const list = ref([])                  // 响应式列表

async function loadList() {
  const { data } = await axios.get('/api/articles')
  list.value = data                   // 更新后页面自动渲染
}

onMounted(loadList)                   // 组件挂载后发起请求

页面加载完成自动调用 loadList，数据返回后模板中的 v-for 立即刷新出列表。

拦截器统一处理

登录令牌、统一错误提示等公共逻辑适合放在拦截器里：

// 请求前自动携带令牌
axios.interceptors.request.use((config) => {
  config.headers.Authorization = localStorage.getItem('token')
  return config
})

// 响应后统一处理错误
axios.interceptors.response.use(
  (res) => res,
  () => Promise.reject(new Error('网络异常，请稍后重试'))
)

请求拦截器负责「加料」，响应拦截器负责「善后」，业务代码因此干净许多。

小结

axios 用简洁的 Promise 语法封装了 Ajax，配合 async/await 让代码像同步一样好读。掌握 GET、POST 与拦截器之后，就可以在组件里自由读写后端数据了。