vue 项目中常用的 2 个 Ajax 库

一、前言

在 Vue 项目的开发过程中，前端通常需要与后端 API 进行数据交互。为了实现异步请求（Ajax），我们常常会使用一些网络请求库来简化开发流程并提升代码的可维护性。

目前在 Vue 项目中，最常用且推荐的两个 Ajax 请求方案是：

• axios：功能强大、支持 Promise 接口、自动转换 JSON 数据、支持拦截器等；
• 原生 fetch API：浏览器内置，无需引入额外依赖，简洁现代；

本文将带你深入了解这两个库的基本用法、优缺点对比以及在 Vue 中的实际应用场景，帮助你根据项目需求选择合适的网络请求方式。

二、为什么需要 Ajax 请求？

Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，通过 JavaScript 与服务器进行异步通信的技术。

在 Vue 中，常见的 Ajax 使用场景包括：

场景	示例
获取数据	向后端接口请求用户列表、商品信息等
提交表单	用户填写完表单后提交到服务端
登录认证	发送用户名密码获取 Token
文件上传	上传图片、文档等文件
错误处理	网络异常或接口错误提示

三、Axios 简介与使用示例

✅ Axios 是什么？

Axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js 环境。它功能丰富，易于集成进 Vue 项目中，是目前最流行的 Ajax 请求库之一。

🔧 安装 Axios

npm install axios

📌 基本使用（GET / POST）

GET 请求示例：

import axios from 'axios'

axios.get('https://api.example.com/users')
  .then(response => {
    console.log('用户列表:', response.data)
  })
  .catch(error => {
    console.error('请求失败:', error)
  })

POST 请求示例：

axios.post('https://api.example.com/login', {
  username: 'admin',
  password: '123456'
})
.then(res => {
  console.log('登录成功:', res.data)
})
.catch(err => {
  console.error('登录失败:', err)
})

🧩 支持的功能亮点：

功能	描述
自动转换 JSON	请求/响应自动序列化和反序列化
拦截器	可以统一处理请求头、响应体
取消请求	支持取消未完成的请求
浏览器兼容性好	兼容主流浏览器及 IE 11+
支持 TypeScript	类型友好，便于开发大型项目

四、Fetch API 简介与使用示例

✅ Fetch 是什么？

fetch() 是现代浏览器内置的用于发起网络请求的 API，它返回一个 Promise，语法简洁，是原生替代 jQuery.ajax() 的现代方案。

⚠️ 注意：Fetch 不支持 IE，如需兼容旧浏览器，请使用 Polyfill 或改用 Axios。

📌 基本使用（GET / POST）

GET 请求示例：

fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => {
    console.log('用户列表:', data)
  })
  .catch(err => {
    console.error('请求失败:', err)
  })

POST 请求示例：

fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'admin',
    password: '123456'
  })
})
.then(response => response.json())
.then(data => {
  console.log('登录成功:', data)
})
.catch(err => {
  console.error('登录失败:', err)
})

🧩 优点：

特点	描述
原生支持	不需要安装额外库
简洁易用	语法简单，符合现代 JS 风格
可配合 Service Worker 使用	更好的 PWA 支持

❗ 缺点：

缺点	说明
不支持拦截器	无法统一处理请求/响应逻辑
默认不带 Cookie	需要手动配置 credentials: 'include'
不支持取消请求	需要借助 AbortController 实现
错误处理较麻烦	需要手动判断 response.ok

五、Axios vs Fetch 对比总结

对比项	Axios	Fetch
是否需要安装	✅（需 npm install）	❌（浏览器内置）
支持拦截器	✅	❌
支持取消请求	✅	✅（需 AbortController）
自动 JSON 转换	✅	❌（需手动调用 .json()）
默认携带 Cookie	❌（可配置）	❌（需手动设置）
错误处理	更加友好	需要手动判断状态码
浏览器兼容性	✅（IE11+）	❌（不支持 IE）
支持 TypeScript	✅	✅
推荐程度	✅ 大多数项目首选	✅ 小型项目或学习用途

📌 通俗理解：

• Axios：像"瑞士军刀"，功能多、灵活、适合复杂项目；
• Fetch：像"便携小刀"，轻量、原生、适合小型项目或快速原型。

六、在 Vue 中如何封装请求库（以 Axios 为例）

✅ 步骤 1：创建 utils/request.js

// utils/request.js
import axios from 'axios'

const service = axios.create({
  baseURL: '/api', // 所有请求默认添加 /api 前缀
  timeout: 5000,  // 超时时间
})

// 请求拦截器
service.interceptors.request.use(config => {
  // 可在此添加 token、loading 等操作
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(response => {
  // 统一处理响应数据
  return response.data
}, error => {
  // 统一错误提示
  console.error('请求出错:', error)
  return Promise.reject(error)
})

export default service

✅ 步骤 2：组件中调用封装好的方法

import request from '@/utils/request'

export default {
  methods: {
    async fetchUsers() {
      try {
        const users = await request.get('/users')
        console.log('用户数据:', users)
      } catch (err) {
        alert('获取用户失败')
      }
    }
  }
}

七、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！