微信小程序 wx.request 封装与全局挂载

Thu, 17 Mar 2022 09:42:13 +0800

小程序项目里到处散落着 wx.request，token 过期处理、loading 状态、错误提示各有各的写法。统一封装一次，全局挂载，所有页面直接用 app.request。

封装目标

自动携带 token（从 storage 读取）
token 过期自动跳转登录
可选 loading 遮罩
统一错误提示
Promise 风格调用
挂载到 app 全局可用

完整封装

在项目根目录创建 utils/request.js：

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

/**
 * 统一请求封装
 * @param {Object} options - 请求配置
 * @param {string} options.url - 接口路径（相对路径，自动拼接 BASE_URL）
 * @param {string} [options.method='GET'] - 请求方法
 * @param {Object} [options.data] - 请求参数
 * @param {Object} [options.header] - 自定义 header
 * @param {boolean} [options.showLoading=true] - 是否显示 loading
 * @param {string} [options.loadingText='加载中...'] - loading 文案
 * @returns {Promise}
 */
function request(options = {}) {
 const {
 url,
 method = 'GET',
 data = {},
 header = {},
 showLoading = true,
 loadingText = '加载中...',
 } = options;

 // 1. loading
 if (showLoading) {
 wx.showLoading({ title: loadingText, mask: true });
 }

 // 2. 组装 header — 自动带 token
 const token = wx.getStorageSync('token');
 const headers = {
 'Content-Type': 'application/json',
 ...header,
 };
 if (token) {
 headers['Authorization'] = `Bearer ${token}`;
 }

 // 3. 发起请求
 return new Promise((resolve, reject) => {
 wx.request({
 url: BASE_URL + url,
 method,
 data,
 header: headers,
 success(res) {
 if (showLoading) wx.hideLoading();

 const { statusCode, data } = res;

 // HTTP 成功
 if (statusCode === 200) {
 // 业务码判断（按你们后端约定调整）
 if (data.code === 0) {
 resolve(data.data);
 } else if (data.code === 401) {
 // token 过期
 wx.removeStorageSync('token');
 wx.showToast({ title: '登录已过期', icon: 'none' });
 wx.reLaunch({ url: '/pages/login/index' });
 reject(data);
 } else {
 wx.showToast({ title: data.msg || '请求失败', icon: 'none' });
 reject(data);
 }
 } else if (statusCode === 401) {
 wx.removeStorageSync('token');
 wx.showToast({ title: '登录已过期', icon: 'none' });
 wx.reLaunch({ url: '/pages/login/index' });
 reject(res);
 } else {
 wx.showToast({ title: `网络错误 ${statusCode}`, icon: 'none' });
 reject(res);
 }
 },
 fail(err) {
 if (showLoading) wx.hideLoading();
 wx.showToast({ title: '网络异常，请检查网络', icon: 'none' });
 reject(err);
 },
 });
 });
}

/**
 * 快捷方法
 */
function get(url, data, options = {}) {
 return request({ ...options, url, method: 'GET', data });
}

function post(url, data, options = {}) {
 return request({ ...options, url, method: 'POST', data });
}

function put(url, data, options = {}) {
 return request({ ...options, url, method: 'PUT', data });
}

function del(url, data, options = {}) {
 return request({ ...options, url, method: 'DELETE', data });
}

// 导出快捷方法 + 原始方法
module.exports = {
 request,
 get,
 post,
 put,
 del,
};

挂载到全局

在 app.js 中引入并挂载，这样所有页面通过 getApp().request() 即可使用，无需每个页面单独 require。

JavaScript on GYM

微信小程序 wx.request 封装与全局挂载

封装目标

完整封装

挂载到全局