实战篇：（五）UniApp 中 Request 封装与使用全解析（避坑指南）

UniApp 中 Request 封装与使用全解析（避坑指南）

在 UniApp 项目中，接口请求是不可或缺的一部分。为了提高代码的可维护性和扩展性，合理封装请求至关重要。本文将介绍如何在 UniApp 项目中进行 request 请求的封装与使用，并给出避坑指南，帮助你在开发过程中少走弯路。

一、封装请求的基本思路

为了简化和统一接口调用，我们可以将请求逻辑封装到一个通用方法中。通过封装 request，可以为每次请求自动带上公共的请求头、处理全局错误和请求状态，减少重复代码。

1. 基础配置与环境切换

// 引入必要的工具和模块
import errorCode from "@/utils/errorCode"; // 错误码字典
import store from "@/store"; // 状态管理器，用于全局 loading 控制
import {
    globalData } from "@/globalData"; // 全局配置
import {
    md5DigestAsHex } from "@/utils/auth"; // MD5 加密工具

// 根据当前环境切换基础请求地址
let baseURL = globalData.baseUrl;
if (process.env.NODE_ENV === "development") {
   
	baseURL = "/main"; // 开发环境使用本地代理
}

避坑指南：开发环境和生产环境需要不同的请求地址，避免在开发时直接请求生产接口，导致数据污染。

2. 自定义请求头设置

我们可以根据请求方法类型，动态设置 Content-Type，使请求头适应不同接口的需求。

// 根据请求类型动态设置 Content-Type
function getContentType(options) {
   
	if (options.method?.toLocaleUpperCase() === "POST" || options.method?.toLocaleUpperCase() === "DELETE") {
   
		return options.contentType
			? {
    ["content-type"]: options.contentType } // 如果有传入 contentType 则使用
			: {
   }; // 默认返回空对象
	} else {
   
		return {
   };
	}
}

避坑指南：POST 请求的 Content-Type 通常是 application/json 或 application/x-www-form-urlencoded，而 GET 请求不需要 Content-Type，根据接口文档调整传参格式。

3. request 方法封装

request 方法是核心，它负责发起请求、设置请求头、处理请求的成功和失败。

// 全局请求封装，返回一个 Promise
export const request = (options) => {
   
	return new Promise((resolve, reject) => {
   
		store.commit("loading"); // 开启全局 loading 状态

		// 特殊处理：如果是登录验证码接口，清除本地缓存的 token
		if (options.url === "/login/captcha/captcha") {
   
			uni.removeStorageSync("token");
		}

		uni.request({
   
			url: baseURL + options.url,