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

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

基础请求封装（request.js）

javascript 复制代码

// 基础配置
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）

javascript 复制代码

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

在页面中使用

javascript 复制代码

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对象实现请求取消
添加并发请求控制

调试辅助：

javascript 复制代码

// 在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进行类型约束以提高代码健壮性。