Vue3請求后端接口實現方式
更新時間：2025年09月29日 08:45:27 作者：Rysxt
本文詳解Vue3中使用Fetch和Axios與后端交互的方法,涵蓋請求發(fā)起、狀態(tài)管理、錯誤處理及跨域等解決方案,推薦優(yōu)先使用Axios,其攔截器、自動轉換等特性提升開發(fā)效率,建議封裝實例與API函數以統(tǒng)一配置
在Vue3應用中，與后端API交互是實現動態(tài)數據展示的核心環(huán)節(jié)。
本文將通過??原生Fetch API??和??Axios庫??兩種常用方式，詳細講解如何在Vue3組件中發(fā)起請求、處理響應、管理狀態(tài)及解決常見問題，幫助你構建高效、可維護的前后端交互邏輯。
一、準備工作
在開始之前，請確保你的開發(fā)環(huán)境已安裝以下工具：
- ??Node.js??（≥16.0）：用于運行Vue項目；
- ??Vue CLI??：用于創(chuàng)建和管理Vue3項目（若未安裝，可通過
npm install -g @vue/cli全局安裝）。
創(chuàng)建一個新的Vue3項目：
vue create vue3-api-tutorial cd vue3-api-tutorial
選擇“Vue 3”配置即可完成項目初始化。
二、使用原生Fetch API請求后端
Fetch API是現代瀏覽器內置的HTTP請求工具，無需額外安裝依賴，適合簡單的GET/POST請求。
1. 基礎GET請求示例
在src/components目錄下創(chuàng)建FetchExample.vue組件，代碼如下：
<template>
<div>
<h1>用戶列表（Fetch API）</h1>
<!-- 加載狀態(tài)提示 -->
<div v-if="loading">加載中...</div>
<!-- 錯誤信息提示 -->
<div v-if="errorMsg" style="color: red;">{{ errorMsg }}</div>
<!-- 數據展示 -->
<ul v-if="users.length && !loading">
<li v-for="user in users" :key="user.id">{{ user.name }} ({{ user.email }})</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
users: [], // 存儲用戶數據
loading: false, // 加載狀態(tài)
errorMsg: '' // 錯誤信息
}
},
mounted() {
this.fetchUsers(); // 組件掛載后自動發(fā)起請求
},
methods: {
async fetchUsers() {
this.loading = true; // 開啟加載狀態(tài)
this.errorMsg = ''; // 清空錯誤信息
try {
// 發(fā)起GET請求（使用JSONPlaceholder測試API）
const response = await fetch('https://jsonplaceholder.typicode.com/users');
if (!response.ok) { // 檢查響應狀態(tài)（非200-299視為錯誤）
throw new Error(`網絡響應異常：${response.status}`);
}
const data = await response.json(); // 解析JSON數據
this.users = data; // 更新組件數據
} catch (error) {
this.errorMsg = `獲取數據失?。?{error.message}`; // 捕獲并顯示錯誤
console.error('Fetch請求錯誤：', error);
} finally {
this.loading = false; // 關閉加載狀態(tài)
}
}
}
}
</script>2. POST請求示例（提交表單數據）
若需要向后臺提交數據（如用戶登錄），可使用Fetch API的POST方法：
methods: {
async loginUser() {
const userData = { username: 'admin', password: '123456' };
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json' // 聲明請求體格式為JSON
},
body: JSON.stringify(userData) // 將JavaScript對象轉為JSON字符串
});
const result = await response.json();
console.log('登錄成功：', result);
} catch (error) {
console.error('登錄失?。?, error);
}
}
}3. 注意事項
- ??跨域問題??：若前端（
http://localhost:8080）與后端（http://localhost:5000）不在同一端口，需在后端配置CORS（如Flask中使用flask-cors庫）或在Vue項目中配置代理（見下文“常見問題解決”）； - ??錯誤處理??：務必捕獲
fetch的catch錯誤，并提示用戶友好的錯誤信息； - ??加載狀態(tài)??：通過
loading屬性控制加載提示，提升用戶體驗。
三、使用Axios庫請求后端
Axios是基于Promise的HTTP客戶端，支持請求/響應攔截、自動JSON轉換、取消請求等功能，更適合復雜項目。
1. 安裝Axios
npm install axios
2. 封裝Axios實例（推薦）
為統(tǒng)一管理請求配置（如baseURL、超時時間、攔截器），建議創(chuàng)建一個src/utils/request.js文件：
import axios from 'axios';
// 創(chuàng)建Axios實例
const request = axios.create({
baseURL: '/api', // 基礎路徑（可根據環(huán)境變量動態(tài)設置）
timeout: 5000 // 請求超時時間（毫秒）
});
// 請求攔截器：在發(fā)送請求前處理（如添加token）
request.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`; // 添加認證頭
}
return config;
},
error => Promise.reject(error) // 攔截請求錯誤
);
// 響應攔截器：統(tǒng)一處理響應（如判斷狀態(tài)碼）
request.interceptors.response.use(
response => {
// 假設后端返回格式為 { code: 0, data: {}, message: '' }
if (response.data.code !== 0) {
return Promise.reject(response.data.message); // 非0狀態(tài)碼視為錯誤
}
return response.data.data; // 返回實際數據
},
error => {
console.error('請求錯誤：', error);
return Promise.reject(error.message || '網絡異常'); // 統(tǒng)一錯誤提示
}
);
export default request;3. 在組件中使用Axios
創(chuàng)建src/components/AxiosExample.vue組件：
<template>
<div>
<h1>用戶列表（Axios）</h1>
<div v-if="loading">加載中...</div>
<div v-if="errorMsg" style="color: red;">{{ errorMsg }}</div>
<ul v-if="users.length && !loading">
<li v-for="user in users" :key="user.id">{{ user.name }} ({{ user.email }})</li>
</ul>
</div>
</template>
<script>
import request from '@/utils/request'; // 引入封裝的Axios實例
export default {
data() {
return {
users: [],
loading: false,
errorMsg: ''
}
},
mounted() {
this.fetchUsers();
},
methods: {
async fetchUsers() {
this.loading = true;
this.errorMsg = '';
try {
// 發(fā)起GET請求（自動拼接baseURL：/api/users）
const response = await request.get('/users');
this.users = response; // 直接使用攔截器處理后的數據
} catch (error) {
this.errorMsg = `獲取數據失?。?{error}`;
} finally {
this.loading = false;
}
}
}
}
</script>4. 封裝通用API函數（可選）
為提高代碼復用性，可將不同接口封裝為獨立函數，存放在src/api/user.js中：
import request from '@/utils/request';
// 登錄接口
export function login(data) {
return request.post('/user/login', data);
}
// 獲取用戶信息接口
export function getUserInfo() {
return request.get('/user/info');
}
// 獲取用戶列表接口
export function getUserList() {
return request.get('/users');
}組件中調用時，只需引入對應函數即可：
import { getUserList } from '@/api/user';
async fetchUsers() {
this.loading = true;
try {
this.users = await getUserList();
} catch (error) {
this.errorMsg = error;
} finally {
this.loading = false;
}
}5. Axios的優(yōu)勢
- ??攔截器??：統(tǒng)一處理token、錯誤提示、請求loading；
- ??自動轉換??：自動將JSON響應轉為JavaScript對象；
- ??取消請求??：支持通過
CancelToken取消未完成的請求； - ??并發(fā)請求??：通過
axios.all同時發(fā)起多個請求。
四、常見問題解決
1. 跨域問題
若前端與后端不在同一域名/端口，需配置代理（以Vite為例）：
- 在
vite.config.js中添加代理配置：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': { // 匹配以/api開頭的請求
target: 'http://localhost:5000', // 后端服務器地址
changeOrigin: true, // 改變請求頭中的origin為目標URL
rewrite: path => path.replace(/^\/api/, '') // 去除請求路徑中的/api前綴
}
}
}
});- 修改Axios實例的
baseURL為/api，即可通過/api/users訪問后端的http://localhost:5000/users。
2. 響應數據格式處理
若后端返回的數據格式與攔截器預設不一致（如{ status: 200, data: {}, msg: '' }），需調整攔截器邏輯：
request.interceptors.response.use(
response => {
if (response.data.status !== 200) {
return Promise.reject(response.data.msg);
}
return response.data.data; // 返回實際數據
}
);3. Token失效處理
在響應攔截器中判斷token失效（如狀態(tài)碼401），并跳轉至登錄頁：
request.interceptors.response.use(
response => response.data.data,
error => {
if (error.response && error.response.status === 401) {
window.location.href = '/login'; // 跳轉登錄頁
}
return Promise.reject(error.message);
}
);五、總結
本文通過Fetch API和Axios兩種方式，詳細講解了Vue3中請求后端接口的完整流程，包括基礎請求、狀態(tài)管理、錯誤處理及常見問題解決。??
推薦優(yōu)先使用Axios??，其豐富的功能和良好的可維護性更適合復雜項目。在實際開發(fā)中，建議通過封裝Axios實例和API函數，統(tǒng)一管理請求配置，提升團隊協(xié)作效率。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在組件中時?？吹紷click.native,在項目中遇到后,簡單介紹下,這篇文章主要給大家介紹了關于Vue中@click.native的使用方法及場景的相關資料,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue中動態(tài)組件使用及傳值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了幫助我們高效操作Virtual?DOM簡單實現及原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
解決ant-design-vue中menu菜單無法默認展開的問題
這篇文章主要介紹了解決ant-design-vue中menu菜單無法默認展開的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細介紹了vue實現圖片裁剪后上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家詳細介紹了Vue實現雙向滑動輸入條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue+tracking.js 實現前端人臉檢測功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
這篇文章主要為大家介紹了Vue?router?路由守衛(wèi)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了基于vue+echarts 數據可視化大屏展示的方法示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2020-03-03
下面小編就為大家分享一篇vue2.0 路由不顯示router-view的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03