当前位置：首页 > news >正文

微信小程序设计的请求封装方案（request.js）

news 2025/8/22 7:40:31

以下是为微信小程序设计的请求封装方案，包含代码示例和最佳实践建议：

基础请求封装（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);
}