在 uni-app 開發中，網絡請求是連接前端與后端的核心橋梁。一個設計良好的請求工具能夠顯著提升開發效率，減少重復代碼。本文將分享一個精簡版的 uni-app 網絡請求工具實現，它保留了核心功能同時保持了足夠的靈活性。

設計思路

一個優秀的網絡請求工具應當具備以下特點：

• 配置集中管理，便于維護
• 支持常用的 GET 和 POST 請求
• 自動處理基礎 URL 拼接
• 統一的加載狀態管理
• 簡潔的錯誤處理機制
• 可擴展性強

基于以上原則，我們實現了一個輕量級但功能完備的網絡請求工具。

實現代碼解析

基礎配置

首先，我們定義了請求的基礎配置，包括基礎 URL、請求頭、超時設置等：

config: {baseURL: setting.IS_DEV ? setting.DEV_URL : setting.PRO_URL,header: {'Content-Type': 'application/json;charset=UTF-8'},dataType: "json",responseType: "text",// 條件編譯，針對不同平臺設置超時// #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXINtimeout: setting.TIMEOUT,// #endif// 其他平臺特定配置...
}

這里使用了 uni-app 的條件編譯特性，為不同平臺設置了合適的參數，體現了跨平臺開發的特點。

加載狀態管理

為了提供良好的用戶體驗，我們實現了加載狀態的自動管理：

/*** 顯示無文字的轉圈加載動畫*/
showLoading() {uni.showLoading({title: '', // 空文字，僅顯示圖標mask: true, // 透明蒙層防止操作穿透icon: 'loading'});
},/*** 隱藏加載動畫*/
hideLoading() {uni.hideLoading();
},

這種設計可以避免在每個請求前后手動調用加載動畫，減少了重復代碼。

請求方法封裝

我們分別封裝了 GET 和 POST 方法，讓 API 調用更加直觀：

/*** 發送GET請求* @param {string} url - 請求地址* @param {object} data - 請求參數* @param {object} options - 額外配置項* @returns {Promise}*/
get(url, data, options) {return this.request({...options,url,data,method: 'GET'});
},/*** 發送POST請求* @param {string} url - 請求地址* @param {object} data - 請求參數* @param {object} options - 額外配置項* @returns {Promise}*/
post(url, data, options) {return this.request({...options,url,data,method: 'POST',header: {...options?.header,'Content-Type': 'application/x-www-form-urlencoded'}});
},

POST 方法特別設置了適合表單提交的 Content-Type，同時保留了配置項的靈活性。

核心請求邏輯

request 方法是整個工具的核心，負責處理實際的網絡請求：

request(options) {// 合并配置const config = {...this.config,...options};config.header = {...this.config.header,...options.header};// 處理請求URLconfig.url = config.baseURL + config.url;// 添加tokenconst token = uni.getStorageSync('token') || '';if (token) {config.header.Authorization = `Bearer ${token}`;}this.showLoading();return new Promise((resolve, reject) => {uni.request(config).then(([err, res]) => {this.hideLoading();if (err) {return reject(err);}// 檢查返回數據中的code值if (res.data && res.data.code !== 200) {const error = new Error(`請求錯誤，錯誤碼: ${res.data.code}`);error.code = res.data.code;error.response = res;return reject(error);}resolve(res);}).catch(error => {this.hideLoading(); reject(error);});});
}

這段代碼實現了幾個關鍵功能：

1. 配置合并，允許全局配置與單次請求配置結合
2. URL 自動拼接，無需在每次請求時手動拼接基礎 URL
3. Token 自動附加，簡化身份驗證流程
4. 統一的錯誤處理，當返回 code 不等于 200 時視為失敗
5. 自動管理加載狀態，請求開始時顯示，結束時隱藏

使用示例

使用這個工具非常簡單，只需導入后直接調用即可：

import request from '@/utils/request.js';// 發送GET請求
async function fetchData() {try {const res = await request.get('/api/data', { id: 1 });console.log('數據獲取成功', res.data);} catch (error) {console.error('數據獲取失敗', error);}
}// 發送POST請求
async function submitForm(formData) {try {const res = await request.post('/api/submit', formData);console.log('提交成功', res.data);} catch (error) {console.error('提交失敗', error);}
}

總結

本文介紹了一個精簡版的 uni-app 網絡請求工具，它具有以下特點：

1. 簡潔高效：保留核心功能，去除冗余代碼，讓請求邏輯更加清晰
2. 易用性強：封裝了 GET 和 POST 方法，API 設計直觀，降低使用門檻
3. 統一管理：集中處理 URL 拼接、加載狀態、Token 附加等共性邏輯
4. 錯誤處理：當返回 code 不等于 200 時統一視為失敗，簡化錯誤處理流程
5. 跨平臺兼容：利用 uni-app 的條件編譯特性，適配不同平臺的特性

這個工具可以作為項目的基礎網絡層，根據實際需求進行擴展。例如，可以添加請求攔截器、響應攔截器、錯誤重試等功能，使其更加強大。

通過封裝網絡請求，我們可以在項目中實現代碼復用，減少重復勞動，同時也便于后期維護和功能擴展。這種設計思想不僅適用于 uni-app，也可以應用于其他前端框架的網絡請求處理中。