实用指南：微信小程序设计的请求封装方案（request.js）

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

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

2. 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)
};

3. 在页面中使用

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);
}
}
});

最佳实践建议：

1. 安全增强：

• 使用HTTPS协议
• 敏感数据加密传输
• 重要接口增加双重验证
• 定期更新token机制

2. 性能优化：

• 添加请求缓存机制
• 实现请求重试策略
• 使用wx.request的task对象实现请求取消
• 添加并发请求控制

3. 调试辅助：

// 在request.js中添加调试模式
if (process.env.NODE_ENV === 'development') {
wx.setStorageSync('debug', true);
}
// 在请求配置中添加调试日志
if (wx.getStorageSync('debug')) {
console.log(`[${method
}] ${url
}`, data);
}

4. 扩展功能建议：

• 添加文件上传封装
• 实现WebSocket封装
• 添加请求队列管理
• 支持多环境配置（开发/测试/生产）

注意事项：

1. 小程序域名白名单需要在mp.weixin.qq.com配置
2. 用户敏感信息需要加密处理
3. 合理设置请求超时时间（建议8-15秒）
4. 重要操作建议添加二次确认
5. 遵循微信小程序性能优化规范

可以根据具体业务需求在此基础框架上进行扩展，建议使用TypeScript进行类型约束以提高代码健壮性。