微信小程序wx.request的简单封装

在微信小程序中，对 wx.request 进行简单封装，可以让请求逻辑更加清晰，易于管理和重用。封装的主要目的是集中管理请求的配置、错误处理、以及统一的成功和失败回调。

1. 封装基础请求模块

// utils/request.js

/**
 * 封装的 wx.request 方法
 * @param {Object} options - 请求配置
 * @returns {Promise} - 返回一个 Promise 对象
 */
function request(options) {
  // 默认配置
  const defaultOptions = {
    url: '', // 必填项，接口地址
    method: 'GET', // 默认 GET 方法
    data: {}, // 请求参数
    header: {
      'Content-Type': 'application/json',
      'Authorization': wx.getStorageSync('token') || '' // 如果需要，添加认证信息
    },
    timeout: 10000, // 请求超时时间，单位毫秒
    success: () => {},
    fail: () => {},
    complete: () => {}
  };

  // 合并用户传入的配置和默认配置
  const finalOptions = { ...defaultOptions, ...options };

  // 返回一个 Promise 对象
  return new Promise((resolve, reject) => {
    wx.request({
      url: finalOptions.url,
      method: finalOptions.method,
      data: finalOptions.data,
      header: finalOptions.header,
      timeout: finalOptions.timeout,
      success: (res) => {
        if (res.statusCode >= 200 && res.statusCode < 300) {
          // 请求成功，返回数据
          finalOptions.success(res.data);
          resolve(res.data);
        } else {
          // 请求失败，处理错误
          finalOptions.fail(res);
          reject(res);
        }
      },
      fail: (err) => {
        // 请求失败
        finalOptions.fail(err);
        reject(err);
      },
      complete: () => {
        // 请求完成
        finalOptions.complete();
      }
    });
  });
}

module.exports = { request };

2. 使用封装的请求模块

在你的页面或业务逻辑代码中，你可以像下面这样使用封装的 request 模块：

// pages/index/index.js
const { request } = require('../../utils/request');

Page({
  data: {
    userInfo: null
  },

  onLoad: function () {
    this.fetchUserData();
  },

  fetchUserData: function () {
    request({
      url: 'https://example.com/api/userinfo',
      method: 'GET',
      success: (data) => {
        console.log('用户信息获取成功', data);
        this.setData({
          userInfo: data
        });
      },
      fail: (error) => {
        console.error('用户信息获取失败', error);
      }
    });
  }
});

3. 其他常见配置和使用

添加全局配置

你可以在封装模块中添加全局配置，例如默认的 baseURL：

// utils/request.js
const BASE_URL = 'https://example.com/api';

function request(options) {
  const defaultOptions = {
    url: `${BASE_URL}${options.url}`, // 拼接 baseURL
    // 其他配置
  };
  
  // ... 其他代码不变
}

处理请求拦截器

如果你需要对请求进行拦截（例如，添加认证 token 或者进行其他处理），可以在 request 函数中添加拦截逻辑：

function request(options) {
  // 在请求之前处理
  options.header['Authorization'] = wx.getStorageSync('token') || '';

  // ... 其他代码不变
}