当前位置：首页 > news >正文

UniApp 中封装 HTTP 请求与 Token 管理（附Demo）

news 来源：原创 2025/9/12 23:18:16

1. 基本知识

从实战代码中学习，上述实战代码来源：芋道源码/yudao-mall-uniapp

在这里插入图片描述

该代码中，通过自定义 request 函数对 HTTP 请求进行了统一管理，并且结合了 Token 认证机制

请求封装原理，request 函数是对 uni.request 的一个封装：

动态设置请求头：根据 config 的配置，决定是否需要在请求头中附加 Authorization（Bearer Token）。Token 是从本地存储中获取的
根据环境区分不同的 Base URL：根据当前的开发环境（development 或 production），动态设置请求的基础 URL（baseUrl）
统一处理请求参数：config.params 会被转化成查询字符串，拼接到请求的 URL 后面
Promise 封装异步操作：请求通过 uni.request 发出，并将返回的 response 数据封装为一个 Promise，使得调用 request 的地方可以使用 then 或 catch 来处理结果

Token 认证管理原理

Token 存储：uni.setStorageSync 和 uni.getStorageSync 被用来在客户端本地存储 ACCESS_TOKEN 和 REFRESH_TOKEN，这两个 Token 被用于身份验证
获取 Token：在每次 HTTP 请求时，首先会检查请求是否需要 Token（通过 config.headers.isToken 判断）。如果需要，就从本地存储中获取 AccessToken 并加入到请求头中
Token 过期处理：当请求返回的状态码为 401 时，表示 Token 已过期，此时会弹出提示框，让用户重新登录并清除旧的 Token

错误处理机制

网络错误：封装了常见的网络错误（如超时、服务器错误等），并提供了友好的提示
接口返回错误：统一处理接口返回的错误，错误信息根据 res.data.code 的值来决定，如果返回的是 500 错误或其他非 200 的错误，则通过 toast 提示给用户
401 错误处理：当返回状态码为 401 时，表示 Token 过期或无效，代码会自动处理登出流程

2. Demo

根据实战中的Demo，给出一版通用的Demo：

封装request的时候，需要与token结合：

// utils/request.js
import { getAccessToken, setToken, removeToken } from '@/utils/auth';
import config from '@/config';
import errorCode from '@/utils/errorCode';
import { toast, showConfirm } from '@/utils/common';let timeout = 10000;
let baseUrl = process.env.NODE_ENV === 'development' ? config.devbaseUrl : config.prodbaseUrl;const request = config => {const isToken = (config.headers || {}).isToken === false;config.header = config.header || {};if (getAccessToken() && !isToken) {config.header['Authorization'] = 'Bearer ' + getAccessToken();}config.header['tenant-id'] = '1'; // 强制设置租户 IDif (config.params) {let url = config.url + '?' + tansParams(config.params);url = url.slice(0, -1);config.url = url;}return new Promise((resolve, reject) => {uni.request({method: config.method || 'get',timeout: config.timeout || timeout,url: config.baseUrl || baseUrl + config.url,data: config.data,header: config.header,dataType: 'json'}).then(response => {let [error, res] = response;if (error) {toast('后端接口连接异常');reject('后端接口连接异常');return;}const code = res.data.code || 200;const msg = errorCode[code] || res.data.msg || errorCode['default'];if (code === 401) {showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {if (res.confirm) {removeToken();uni.reLaunch({ url: '/pages/login' });}});reject('无效的会话，或者会话已过期，请重新登录。');} else if (code === 500) {toast(msg);reject('500');} else if (code !== 200) {toast(msg);reject(code);}resolve(res.data);}).catch(error => {let { message } = error;if (message === 'Network Error') message = '后端接口连接异常';else if (message.includes('timeout')) message = '系统接口请求超时';else if (message.includes('Request failed with status code')) message = '系统接口' + message.substr(message.length - 3) + '异常';toast(message);reject(error);});});
};export default request;

对应的token文件：

// utils/auth.js
const AccessTokenKey = 'ACCESS_TOKEN';
const RefreshTokenKey = 'REFRESH_TOKEN';export function getAccessToken() {return uni.getStorageSync(AccessTokenKey);
}export function getRefreshToken() {return uni.getStorageSync(RefreshTokenKey);
}export function setToken(token) {uni.setStorageSync(AccessTokenKey, token.accessToken);uni.setStorageSync(RefreshTokenKey, token.refreshToken);
}export function removeToken() {uni.removeStorageSync(AccessTokenKey);uni.removeStorageSync(RefreshTokenKey);
}

3. 拓展

process.env.NODE_ENV 是 Node.js 环境中用于获取当前应用运行环境的一个变量

在大多数前端框架（如 Vue、React）以及后端框架（如 Express）中，process.env.NODE_ENV 被广泛用于区分不同的开发环境

前端vue中可能已经标明了
在开发模式下：NODE_ENV=development npm run dev
在生产模式下：NODE_ENV=production npm run build
在 npm 脚本中，可以通过 cross-env 等工具来跨平台设置环境变量：

"scripts": {"dev": "cross-env NODE_ENV=development vue-cli-service serve","build": "cross-env NODE_ENV=production vue-cli-service build"
}

另外一个接口超时时间，全局默认是20秒，如果时长不对，可以在单独某个接口设置：

// 上传图片
uploadImage(data) {return upload({url: '/infra/file/upload',method: 'upload',filePath: data.filePath,timeout: 30000  // 设置超时时间为30秒});
}

UniApp 中封装 HTTP 请求与 Token 管理（附Demo）

目录 1. 基本知识2. Demo3. 拓展 1. 基本知识从实战代码中学习，上述实战代码来源：芋道源码/yudao-mall-uniapp 该代码中，通过自定义 request 函数对 HTTP 请求进行了统一管理，并且结合了 Token 认证机制请求封装原理&#xff…...

编程日记 2025/9/12 23:18:16

paddlehub hub TypeError 错误

pip install paddlehub hub install chinese_ocr_db_crnn_mobile 提示错误： TypeError: Descriptors cannot be created directly. If this call came from a _pb2.py file, your generated code is out of date and must be regenerated with protoc > 3.19.0…...

编程日记 2025/9/10 21:12:02

机器学习--（随机森林，线性回归）

一、集成学习方法之随机森林集成学习的基本思想就是将多个分类器组合，从而实现一个预测效果更好的集成分类器。集成算法可以说从一方面验证了中国的一句老话：三个臭皮匠，赛过诸葛亮。集成算法大致可以分为：Bagging，B…...

编程日记 2025/9/9 15:46:38

和鲸科技推出人工智能通识课程解决方案，助力AI人才培养

2025年2月，教育部副部长吴岩应港澳特区政府邀请，率团赴港澳宣讲《教育强国建设规划纲要 (2024—2035 年)》。在港澳期间，吴岩阐释了教育强国目标的任务，并与特区政府官员交流推进人工智能人才培养的办法。这一系列行动体现出人工智…...

编程日记 2025/9/12 8:41:51

从暴力破解到时空最优：LeetCode算法设计核心思维解密

一、算法优化金字塔模型（时间复杂度/空间复杂度协同优化） 1.1 复杂度分析的本质大O记号的三层认知： ① 理论复杂度边界（理想模型） ② 硬件架构影响（缓存命中率/分支预测） ③ 语言特性损耗&am…...

编程日记 2025/9/7 7:40:08

关于在java项目部署过程MySQL拒绝连接的分析和解决方法

前言在最近一次部署项目一次项目部署过程中，由于没有对MySQL数据库的部分权限和远程连接进行授权，导致了在执行项目功能API时，出现MySQL连接异常或MySQL拒绝连接的问题。问题以下是部分报错截图： 分析根据日志提示&#xf…...

编程日记 2025/9/8 12:49:21

『抓包工具』安卓抓包小黄鸟 lsp过检测雷电模拟器root（保姆级图文）

目录准备工作雷电9.0.74 64位下载对应工具通过面具鸭安装面具安装防检测模块设置Zygisk安装小黄鸟简易抓包教程总结欢迎关注『抓包工具』专栏，持续更新中欢迎关注『抓包工具』专栏，持续更新中请注意不要随便升级雷电模拟器了不然你需要重新通过面具鸭安装面具准备工…...

编程日记 2025/9/9 4:24:07

k8S通过代理将集群外的中间件引入集群内访问 —— 筑梦之路

背景说明有部分中间件是跑在Kubernetes集群之外，我们希望通过service的方式来访问集群外的中间件，比如访问我们k8s集群外的elasticsearch集群。 ES节点本身又处在一个负载均衡IP：192.168.100.100 之后，但是代理的端口号是9202&am…...

编程日记 2025/9/10 18:47:22

【考试大纲】高级系统架构设计师考试大纲

目录引言一、考试说明1．考试目标2．考试要求3．考试科目设置二、考试范围考试科目1：系统架构设计综合知识考试科目2:系统架构设计案例分析考试科目3:系统架构设计论文引言最新的系统架构设计师考试大纲出版于 2022 年 11 月，本考试大纲基于此版本整理。一、考试说明…...

编程日记 2025/9/10 7:06:57

三个小时学完vue3 —— 简单案例（二）

三个小时学完vue3（二） 图片轮播案例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...

编程日记 2025/9/7 10:12:45

筑牢安全防线：工商业场所燃气泄漏防护新方案

燃气安全是企业经营不可逾越的生命线。在餐饮后厨、化工车间、酒店锅炉房等场所，可燃气体一旦泄漏，极易引发严重事故。如何实现精准监测、快速响应，成为工业及商业领域安全管理的核心诉求。旭华智能深耕安全监测领域，推出的工业及…...

编程日记 2025/9/12 23:05:57

git上传仓库操作

在 Visual Studio Code (VSCode) 中，手动将本地仓库与远程仓库关联起来是一个常见的需求。以下是详细的操作步骤和解释： 前提条件已安装 Git：确保你的系统中已经安装了 Git，并且可以通过命令行运行 git 命令。已初始化本地仓库&…...

编程日记 2025/9/9 6:46:14

广义线性模型下的数据分析（R语言）

一、实验目的： 通过上机试验，掌握利用R实现线性回归分析、逻辑回归、列联分析及方差分析，并能对分析结果进行解读。数据： 链接: https://pan.baidu.com/s/1JqZ_KbZJEk-pqSUWKwOFEw 提取码: hxts 二、实验内容： 1、2…...

编程日记 2025/9/11 20:55:27

贪心算法精品题

1.找钱问题本题的贪心策略在于我们希望就可能的保留作用大的5元 class Solution { public:bool lemonadeChange(vector<int>& bills) {std::map<int ,int> _map;for(auto ch:bills){if(ch 5) _map[ch];else if(ch 10){if(_map[5] 0) return false;else{_m…...

编程日记 2025/9/12 21:09:12

爱普生汽车用显示控制器IC：ScalerIC,汽车接口IC,相机接口IC

爱普生汽车显示控制器IC，汽车显示控制器芯片可以分为三类：爱普生显示控制芯片Scaler IC ，爱普生汽车接口IC，爱普生相机接口IC。下面就给大家分别介绍下这三类芯片的具体型号的特征及用途。爱普生显示控制芯片 Scaler IC Scaler…...

编程日记 2025/9/7 6:32:37

深度学习基础--ResNet50V2网络的讲解，ResNet50V2的复现(pytorch)以及用复现的ResNet50做鸟类图像分类

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者：K同学啊前言如果说最经典的神经网络，ResNet肯定是一个，从ResNet发布后，作者又进行修改，命名为ResNe50v2&#xff0c…...

编程日记 2025/9/11 6:40:05

物理竞赛中的线性代数

线性代数 1 行列式 1.1 n n n 阶行列式定义 1.1.1：称以下的式子为一个 n n n 阶行列式： ∣ A ∣ ∣ a 11 a 12 ⋯ a 1 n a 21 a 22 ⋯ a 2 n ⋮ ⋮ ⋱ ⋮ a n 1 a n 2 ⋯ a n n ∣ \begin{vmatrix}\mathbf A\end{vmatrix} \begin{vmatrix} a_{11…...

编程日记 2025/9/12 0:29:44

OptiTrack光学跟踪系统：引领工厂机器人应用的革新浪潮

在现代化的工厂生产线上，一台机械臂正以惊人的毫米级精度执行着精密零件的装配任务。这一精准操作的背后，是OptiTrack光学跟踪系统的实时捕捉与优化，它正助力生产效率与产品质量迈向新的高度。如今，这一技术正在全球范围内广泛应用…...

编程日记 2025/9/9 17:10:09

Coze/Dify/Ollama在玩ai时候的用途

Coze、Dify 和 Ollama 是三种不同的工具或平台，它们各自有不同的定位和用途。以下是对它们的区别、优缺点以及部署和使用方式的详细分析。 1. Coze 简介 Coze 是一个专注于构建基于大语言模型（LLM）的应用程序的开发平台。它类似于 Dify&…...

编程日记 2025/9/10 18:42:25

使用Docker Compose部署 MySQL8

MySQL 8 是一个功能强大的关系型数据库管理系统，而 Docker 则是一个流行的容器化平台。结合使用它们可以极大地简化 MySQL 8 的部署过程，并且确保开发环境和生产环境的一致性。安装 Docker 和 Docker Compose 首先，确保你的机器上已经安装了 Docker 和 Docker Compose。 …...

编程日记 2025/9/7 10:58:23

Golang快速上手02/Golang基础

4.控制语句 4.1条件控制语句 4.1.1if-elseif-else 与clang不同，if不需要加() if <condition1> {<block1> } else if <condition2> {<block2> } else {<block0> }示例 a : 10 if a > 5 {fmt.Println("a > 5") } els…...

编程日记 2025/9/4 19:26:09

Nginx处理http的流程

文章目录前言一、发版本后旧版本可以用项目基本情况Nginx 配置**解释每一行的作用：****表现和行为：****适用场景**：资源的缓存策略在这里插入图片描述二， nginx处理http的流程Nginx 的 GitHub 源码地址 **Nginx 核心源码解读&a…...

编程日记 2025/9/12 5:26:31

算法之刷题汇总

剑指 Offer 剑指 Offer 题解 | CS-Notes 面试笔记 Leetcode Leetcode 题解 | CS-Notes 面试笔记 GitCode - 全球开发者的开源社区,开源代码托管平台...

编程日记 2025/8/26 12:21:32

【AIGC系列】4：Stable Diffusion应用实践和代码分析

AIGC系列博文： 【AIGC系列】1：自编码器（AutoEncoder, AE） 【AIGC系列】2：DALLE 2模型介绍（内含扩散模型介绍） 【AIGC系列】3：Stable Diffusion模型原理介绍【AIGC系列】4&#xff1…...

编程日记 2025/9/9 22:33:50

【Python爬虫(81)】当量子计算邂逅Python爬虫：一场技术变革的预演

【Python爬虫】专栏简介：本专栏是 Python 爬虫领域的集大成之作，共 100 章节。从 Python 基础语法、爬虫入门知识讲起，深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑，覆盖网页、图片、音频等各类数据爬取，还涉及数据处理与分析。无论是新手小白还是进阶开发…...

编程日记 2025/9/7 15:32:18

Java Web应用中获取客户端的真实IP地址

Java Web应用中获取客户端的真实IP地址，尤其在存在代理服务器的情况下。代码示例： public static String getClientIP(HttpServletRequest request) {String ip = parseCommaSeparatedIPs(request.getHeader("X-Forwarded-For"));if (isInvalid(ip)) {ip = pars…...

编程日记 2025/9/11 20:55:28

R语言+AI提示词：贝叶斯广义线性混合效应模型GLMM生物学Meta分析

全文链接：https://tecdat.cn/?p40797 本文旨在帮助0基础或只有简单编程基础的研究学者，通过 AI 的提示词工程，使用 R 语言完成元分析，包括数据处理、模型构建、评估以及结果解读等步骤（点击文末“阅读原文”获取完整代…...

编程日记 2025/9/7 11:01:50

LangChain原理解析及开发实战指南（2025年最新版）

一、LangChain核心架构解析 1.1 框架设计理念 LangChain是基于提示工程(Prompt Engineering)构建的LLM应用开发框架，其核心思想是通过模块化组件实现大语言模型与业务系统的无缝对接。该框架采用分层设计： 接口层：统一对接OpenAI、DeepSee…...

编程日记 2025/9/7 19:47:24

赋能农业数字化转型雏森科技助力“聚农拼”平台建设

赋能农业数字化转型，雏森科技助力“聚农拼”平台建设在数字化浪潮席卷各行业的今天，农业领域也在积极探索转型升级之路。中农集团一直以“根植大地，服务三农”为核心，以“乡村振兴，农民增收”为目标，及时…...

编程日记 2025/9/8 13:44:52

CMU15445(2023fall) Project #2 - Extendible Hash Index 匠心分析

胡未灭，鬓已秋，泪空流此生谁料心在天山身老沧州 ——诉衷情完整代码见： SnowLegend-star/CMU15445-2023fall: Having Conquered the Loftiest Peak, We Stand But a Step Away from Victory in This Stage. With unwavering determinati…...

编程日记 2025/9/7 19:43:32

深度剖析Seata源码：解锁分布式事务处理的核心逻辑

文章目录写在文章开头如何使用源码(配置转掉)基于AT模式详解Seata全链路流程Seata服务端启动本地服务如何基于GlobalTransaction注解开启事务客户端如何开启分布式事务RM和TC如何协调处理分支事务RM生成回滚日志事务全局提交与回滚小结参考写在文章开头在当今分布式系统日益…...

编程日记 2025/9/9 0:33:45

python配置mmcv与mmdet环境

首先查看自己的cuda版本 nvcc --version 安装与cuda对应的torch版本，对应关系 Previous PyTorch Versions | PyTorch 安装对应的mmcv版本，使用下面命令可以自动安装匹配的版本，使用mim安装 mim install mmcv-full -f https://download.o…...

编程日记 2025/9/8 4:39:59

ESP 32控制无刷电机2

import machine import time import socket import network from machine import I2C, Pin, ADC def start_ap(): """ 启动ESP32的AP模式 """ ap network.WLAN(network.AP_IF) ap.active(True) ssid ESP32_APTest …...

编程日记 2025/9/12 9:22:23

【uniapp原生】实时记录接口请求延迟，并生成写入文件到安卓设备

在开发实时数据监控应用时，记录接口请求的延迟对于性能分析和用户体验优化至关重要。本文将基于 UniApp 框架，介绍如何实现一个实时记录接口请求延迟的功能，并深入解析相关代码的实现细节。前期准备&必要的理解 1. 功能概述该功能的…...

编程日记 2025/8/29 5:04:23

wps角标快速生成

使用^#符号匹配数字，将[^#]内容找到，随后在格式-字体中选择上标，逐个/批量替换即可（比一点点改效率翻倍）...

编程日记 2025/9/4 18:12:04

Azure Speech

1、文字转语音(Text-To-Speech, TTS) 2、语音转文字(Speech-To-Text): Azure Speech to Text 1- 环境配置：Microsoft Azure 注册使用免费服务： 需要信用卡，本人没有，所以没有完成注册...

编程日记 2025/8/26 12:33:01

SHELL32!ILCombine函数分析之连接两个idl

SHELL32!ILCombine函数分析之连接两个idl 第一部分： STDAPI_(LPITEMIDLIST) ILCombine(LPCITEMIDLIST pidl1, LPCITEMIDLIST pidl2) { // Let me pass in NULL pointers if (!pidl1) { if (!pidl2) { return NULL; …...

编程日记 2025/9/11 5:57:57

学习threejs，使用ShaderMaterial自定义着色器材质

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️THREE.ShaderMaterial1.1.1…...

编程日记 2025/9/9 12:56:38

使用 Selenium 和 Requests 自动化获取动态 Referer 和 Sign 的完整指南

在现代网络爬虫和自动化任务中，动态生成的参数（如 Referer 和 Sign）常常是绕过反爬虫机制的关键。本文将详细介绍如何使用 Python 的 Selenium 和 Requests 库，从目标网页中提取动态 Referer 和 Sign，并完成后续的请求…...

编程日记 2025/9/10 6:22:15

1.2.3 使用Spring Initializr方式构建Spring Boot项目

本实战概述介绍了如何使用Spring Initializr创建Spring Boot项目，并进行基本配置。首先，通过Spring Initializr生成项目骨架，然后创建控制器HelloController，定义处理GET请求的方法hello，返回HTML字符串。接着&#xf…...

编程日记 2025/9/9 20:50:11

Cursor+pycharm接入Codeuim(免费版)，Tab自动补全功能平替

如题，笔者在Cursor中使用pycharm写python程序，试用期到了Tab自动补全功能就不能用了，安装Codeuim插件可以代替这个功能。步骤如下： 1. 在应用商店中搜索扩展Codeuim，下载安装 2. 安装完成后左下角会弹出提示框&#x…...

编程日记 2025/8/26 12:36:53

Ruby基础

一、字符串定义 283.to_s //转为string "something#{a}" //定义字符串，并且插入a变量的值 something//单引号定义变量 %q(aaaaaaaaa) // 定义字符串，（）内可以是任何数，自动转义双引号%Q("aaaaa"…...

编程日记 2025/9/7 5:45:00

wzl-django学习

####################################################总的urls.py from django.contrib import admin from django.urls import path,include, re_path from django.views.static import serve from django.conf import settings from drf_yasg import openapi from drf_yas…...

编程日记 2025/9/11 3:03:07

目录

1. 基本知识

2. Demo

3. 拓展

相关文章：