vue 項目中常用的 2 個 Ajax 庫及簡單使用示例
更新時間：2025年06月11日 09:21:35 作者：難釋懷
Ajax是一種在不重新加載整個頁面的情況下,通過 JavaScript 與服務(wù)器進行異步通信的技術(shù),這篇文章主要介紹了vue項目中常用的2 個 Ajax庫,需要的朋友可以參考下
一、前言
在 Vue 項目的開發(fā)過程中，前端通常需要與后端 API 進行數(shù)據(jù)交互。為了實現(xiàn)異步請求（Ajax），我們常常會使用一些網(wǎng)絡(luò)請求庫來簡化開發(fā)流程并提升代碼的可維護性。
目前在 Vue 項目中，最常用且推薦的兩個 Ajax 請求方案是：
axios：功能強大、支持 Promise 接口、自動轉(zhuǎn)換 JSON 數(shù)據(jù)、支持攔截器等；- 原生
fetchAPI：瀏覽器內(nèi)置，無需引入額外依賴，簡潔現(xiàn)代；
本文將帶你深入了解這兩個庫的基本用法、優(yōu)缺點對比以及在 Vue 中的實際應(yīng)用場景，幫助你根據(jù)項目需求選擇合適的網(wǎng)絡(luò)請求方式。
二、為什么需要 Ajax 請求？
Ajax（Asynchronous JavaScript and XML）是一種在不重新加載整個頁面的情況下，通過 JavaScript 與服務(wù)器進行異步通信的技術(shù)。
在 Vue 中，常見的 Ajax 使用場景包括：
| 場景 | 示例 |
|---|---|
| 獲取數(shù)據(jù) | 向后端接口請求用戶列表、商品信息等 |
| 提交表單 | 用戶填寫完表單后提交到服務(wù)端 |
| 登錄認證 | 發(fā)送用戶名密碼獲取 Token |
| 文件上傳 | 上傳圖片、文檔等文件 |
| 錯誤處理 | 網(wǎng)絡(luò)異常或接口錯誤提示 |
三、Axios 簡介與使用示例
? Axios 是什么？
Axios 是一個基于 Promise 的 HTTP 客戶端，適用于瀏覽器和 Node.js 環(huán)境。它功能豐富，易于集成進 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)
})?? 支持的功能亮點：
| 功能 | 描述 |
|---|---|
| 自動轉(zhuǎn)換 JSON | 請求/響應(yīng)自動序列化和反序列化 |
| 攔截器 | 可以統(tǒng)一處理請求頭、響應(yīng)體 |
| 取消請求 | 支持取消未完成的請求 |
| 瀏覽器兼容性好 | 兼容主流瀏覽器及 IE 11+ |
| 支持 TypeScript | 類型友好，便于開發(fā)大型項目 |
四、Fetch API 簡介與使用示例
? Fetch 是什么？
fetch() 是現(xiàn)代瀏覽器內(nèi)置的用于發(fā)起網(wǎng)絡(luò)請求的 API，它返回一個 Promise，語法簡潔，是原生替代 jQuery.ajax() 的現(xiàn)代方案。
?? 注意：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)
})?? 優(yōu)點：
| 特點 | 描述 |
|---|---|
| 原生支持 | 不需要安裝額外庫 |
| 簡潔易用 | 語法簡單，符合現(xiàn)代 JS 風格 |
| 可配合 Service Worker 使用 | 更好的 PWA 支持 |
? 缺點：
| 缺點 | 說明 |
|---|---|
| 不支持攔截器 | 無法統(tǒng)一處理請求/響應(yīng)邏輯 |
| 默認不帶 Cookie | 需要手動配置 credentials: 'include' |
| 不支持取消請求 | 需要借助 AbortController 實現(xiàn) |
| 錯誤處理較麻煩 | 需要手動判斷 response.ok |
五、Axios vs Fetch 對比總結(jié)
| 缺點 | 說明 |
|---|---|
| 不支持攔截器 | 無法統(tǒng)一處理請求/響應(yīng)邏輯 |
| 默認不帶 Cookie | 需要手動配置 credentials: 'include' |
| 不支持取消請求 | 需要借助 AbortController 實現(xiàn) |
| 錯誤處理較麻煩 | 需要手動判斷 response.ok |
?? 通俗理解：
- Axios：像“瑞士軍刀”，功能多、靈活、適合復雜項目；
- Fetch：像“便攜小刀”，輕量、原生、適合小型項目或快速原型。
六、在 Vue 中如何封裝請求庫（以 Axios 為例）
? 步驟 1：創(chuàng)建 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)
})
// 響應(yīng)攔截器
service.interceptors.response.use(response => {
// 統(tǒng)一處理響應(yīng)數(shù)據(jù)
return response.data
}, error => {
// 統(tǒng)一錯誤提示
console.error('請求出錯:', error)
return Promise.reject(error)
})
export default service? 步驟 2：組件中調(diào)用封裝好的方法
import request from '@/utils/request'
export default {
methods: {
async fetchUsers() {
try {
const users = await request.get('/users')
console.log('用戶數(shù)據(jù):', users)
} catch (err) {
alert('獲取用戶失敗')
}
}
}
}七、結(jié)語
到此這篇關(guān)于vue 項目中常用的 2 個 Ajax 庫的文章就介紹到這了,更多相關(guān)vue ajax庫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
el-form組件提供了表單驗證的功能,可以通過在el-form上綁定rules屬性,并在el-form-item上設(shè)置prop屬性來進行校驗,這篇文章主要給大家介紹了關(guān)于el-form組件清除校驗提示正確方法(前端技能提升)的相關(guān)資料,需要的朋友可以參考下2023-12-12
ElementUI表單驗證validate和validateField的使用及區(qū)別
Element-UI作為前端框架,最常使用到的就是表單驗證,下面這篇文章主要給大家介紹了關(guān)于ElementUI表單驗證validate和validateField的使用及區(qū)別,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
在了解vue的常用的實例方法之前，我們應(yīng)該先要了解其常用的實例屬性，你能了解到的vue實例屬性有哪些呢？小編在這里就列舉了幾個常用的vue實例的屬性。大家可以一起參考學習一下2022-08-08
本文介紹了如何通過源碼實現(xiàn)對視頻實時時長、播放時長和暫停時長的監(jiān)聽,詳細闡述了相關(guān)技術(shù)的應(yīng)用方法,幫助開發(fā)者更好地掌握視頻監(jiān)控技術(shù),提高用戶體驗2024-10-10
這篇文章主要介紹了Vue實現(xiàn)拖拽穿梭框功能四種方式,使用原生js實現(xiàn)拖拽，VUe使用js實現(xiàn)拖拽穿梭框，結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
Vue3響應(yīng)式陷阱之對象引用丟失導致的數(shù)據(jù)更新失效的解決方法
最近在開發(fā)一個表單配置功能時,遇到了一個詭異的 Bug：明明在函數(shù)中成功賦值了,console.log 也打印出了正確的值,但頁面上就是不顯示,經(jīng)過一番排查,發(fā)現(xiàn)這是一個典型的 Vue 響應(yīng)式陷阱,今天分享出來,希望能幫到遇到類似問題的同學,需要的朋友可以參考下2025-11-11
這篇文章主要介紹了淺談vue 多個變量同時賦相同值互相影響，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
相信大家之前都寫過一些組件,尤其是這樣的彈窗組件,這篇文章主要來和大家聊聊如何使用Vue手寫一個對話框,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04
這篇文章主要為大家介紹了vue保存自動格式化換行，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
在 Vue2 項目中,ElementUI 的 el-form 組件是常用的表單組件,它提供了豐富的功能和樣式,可以滿足各種需求,本文給大家介紹Vue2+ElementUI表單、Form組件的封裝過程,感興趣的朋友跟隨小編一起看看吧2024-03-03