vue 项目中常用的 2 个 Ajax 库及简单使用示例
作者：難釋懷
Ajax是一种在不重新加载整个页面的情况下,通过 JavaScript 与服务器进行异步通信的技术,这篇文章主要介绍了vue项目中常用的2 个 Ajax库,需要的朋友可以参考下
一、前言
在 Vue 项目的开发过程中，前端通常需要与后端 API 进行数据交互。为了实现异步请求（Ajax），我们常常会使用一些网络请求库来简化开发流程并提升代码的可维护性。
目前在 Vue 项目中，最常用且推荐的两个 Ajax 请求方案是：
axios：功能强大、支持 Promise 接口、自动转换 JSON 数据、支持拦截器等；- 原生
fetchAPI：浏览器内置，无需引入额外依赖，简洁现代；
本文将带你深入了解这两个库的基本用法、优缺点对比以及在 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 对比总结
| 缺点 | 说明 |
|---|---|
| 不支持拦截器 | 无法统一处理请求/响应逻辑 |
| 默认不带 Cookie | 需要手动配置 credentials: 'include' |
| 不支持取消请求 | 需要借助 AbortController 实现 |
| 错误处理较麻烦 | 需要手动判断 response.ok |
📌 通俗理解：
- 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('获取用户失败')
}
}
}
}七、结语
到此这篇关于vue 项目中常用的 2 个 Ajax 库的文章就介绍到这了,更多相关vue ajax库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！