以下是為微信小程序設計的請求封裝方案,包含代碼示例和最佳實踐建議:
- 基礎請求封裝(request.js)
// 基礎配置
const BASE_URL = 'https://api.yourdomain.com';
const TIMEOUT = 10000;// 請求封裝函數
const request = (options) => {return new Promise((resolve, reject) => {wx.request({url: BASE_URL + options.url,method: options.method || 'GET',data: options.data || {},header: {'Content-Type': 'application/json','Authorization': wx.getStorageSync('token') || '',...options.header},timeout: options.timeout || TIMEOUT,success: (res) => {if (res.statusCode >= 200 && res.statusCode < 300) {resolve(res.data);} else {handleError(res);reject(res.data);}},fail: (err) => {handleNetworkError(err);reject(err);},complete: () => {wx.hideLoading();}});});
};// 錯誤處理
const handleError = (response) => {const status = response.statusCode;switch(status) {case 401:wx.removeStorageSync('token');wx.redirectTo({ url: '/pages/login/login' });break;case 403:wx.showToast({ title: '無權限訪問', icon: 'none' });break;case 404:wx.showToast({ title: '資源不存在', icon: 'none' });break;case 500:wx.showToast({ title: '服務器錯誤', icon: 'none' });break;default:wx.showToast({ title: `請求失敗: ${status}`, icon: 'none' });}
};// 網絡錯誤處理
const handleNetworkError = (err) => {wx.showToast({title: '網絡連接失敗,請檢查網絡',icon: 'none'});
};module.exports = {request,get: (url, data, options) => request({ url, method: 'GET', data, ...options }),post: (url, data, options) => request({ url, method: 'POST', data, ...options }),put: (url, data, options) => request({ url, method: 'PUT', data, ...options }),delete: (url, data, options) => request({ url, method: 'DELETE', data, ...options })
};
- API 集中管理(api.js)
const { get, post } = require('./request');module.exports = {// 用戶相關login: (data) => post('/user/login', data),getUserInfo: () => get('/user/info'),// 商品相關getProductList: (params) => get('/products', params),createOrder: (data) => post('/orders', data)
};
- 在頁面中使用
const api = require('../../api');Page({async onLoad() {try {wx.showLoading({ title: '加載中...' });const userInfo = await api.getUserInfo();const products = await api.getProductList({ page: 1 });this.setData({ userInfo, products });} catch (error) {console.error('請求失敗:', error);}}
});
最佳實踐建議:
- 安全增強:
- 使用HTTPS協議
- 敏感數據加密傳輸
- 重要接口增加雙重驗證
- 定期更新token機制
- 性能優化:
- 添加請求緩存機制
- 實現請求重試策略
- 使用wx.request的task對象實現請求取消
- 添加并發請求控制
- 調試輔助:
// 在request.js中添加調試模式
if (process.env.NODE_ENV === 'development') {wx.setStorageSync('debug', true);
}// 在請求配置中添加調試日志
if (wx.getStorageSync('debug')) {console.log(`[${method}] ${url}`, data);
}
- 擴展功能建議:
- 添加文件上傳封裝
- 實現WebSocket封裝
- 添加請求隊列管理
- 支持多環境配置(開發/測試/生產)
注意事項:
- 小程序域名白名單需要在mp.weixin.qq.com配置
- 用戶敏感信息需要加密處理
- 合理設置請求超時時間(建議8-15秒)
- 重要操作建議添加二次確認
- 遵循微信小程序性能優化規范
可以根據具體業務需求在此基礎框架上進行擴展,建議使用TypeScript進行類型約束以提高代碼健壯性。