实用指南：UniApp请求封装实战：从基础到高级，适配多端的优雅方案

在UniApp跨端开发中，网络请求是连接前端与后端的核心环节。如果每个页面都直接使用uni.request，不仅会导致代码冗余，还会出现错误处理混乱、接口管理分散等问题。

本文将分享一套完整的UniApp请求封装方案，基于原生uni.request实现，涵盖环境配置、请求/响应拦截、接口统一管理、错误集中处理等核心能力，同时完美适配App、H5、小程序等多端场景。

一、封装核心目标

在动手封装前，先明确核心目标，避免无意义的代码堆砌：

1. 统一配置：集中管理基础域名、超时时间、状态码等，支持开发/生产环境切换

2. 简化调用：封装GET/POST等常用方法，减少重复代码

3. 拦截处理：请求时自动添加Token，响应时统一处理错误（如Token过期、网络异常）

4. 接口聚合：所有接口地址集中管理，便于维护和修改

5. 多端兼容：基于UniApp原生API，无需额外依赖，适配全端

二、目录结构设计

合理的目录结构是后续维护的基础，建议在项目src/utils文件夹下创建请求相关文件，结构如下：

这种结构将配置、核心逻辑、接口地址分离，符合"单一职责"原则，后续修改某部分功能时不会影响其他模块。

三、分步实现：从配置到封装

1. 环境配置：config.js

区分开发/生产环境的核心配置，避免硬编码导致的频繁修改。UniApp支持process.env.NODE_ENV自动识别环境。

// src/utils/config.js
const env = process.env.NODE_ENV; // 开发环境：development，生产环境：production
module.exports = {
  // 基础域名（根据环境动态切换）
  baseUrl: env === 'development'
    ? 'https://dev-api.yourdomain.com' // 开发环境接口
    : 'https://api.yourdomain.com',   // 生产环境接口
  timeout: 10000, // 请求超时时间（10秒）
  successCode: 200, // 后端约定的成功状态码（需与后端统一）
  tokenKey: 'user_token', // 本地存储Token的键名
  contentType: 'application/json' // 默认请求头类型
};

2. 核心封装：request.js

这是整个方案的核心，基于uni.request封装Promise，实现请求拦截、响应拦截、错误处理等核心功能。

// src/utils/request.js
import config from './config';
/**
 * 核心请求函数
 * @param {Object} options - 请求配置（url, method, data, header等）
 * @returns {Promise} - 返回Promise对象
 */
const request = (options = {}) => {
  // 1. 合并默认配置与用户配置
  const reqOptions = {
    url: config.baseUrl + (options.url || ''), // 拼接完整接口地址
    method: options.method || 'GET', // 默认GET请求
    timeout: options.timeout || config.timeout,
    data: options.data || {},
    header: {
      'Content-Type': options.contentType || config.contentType,
      ...options.header // 允许用户自定义请求头覆盖默认
    }
  };
  // 2. 请求拦截器：添加Token（登录态接口必备）
  const token = uni.getStorageSync(config.tokenKey);
  if (token) {
    // Token格式根据后端要求调整，常见为