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

1. 基本知识

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

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

1. 请求封装原理，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 来处理结果

2. Token 认证管理原理

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

3. 错误处理机制

• 网络错误：封装了常见的网络错误（如超时、服务器错误等），并提供了友好的提示
• 接口返回错误：统一处理接口返回的错误，错误信息根据 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);
}

相关接口请求：

// 在页面中调用封装的请求方法
import request from '@/utils/request';export default {methods: {fetchData() {request({url: '/api/getData',method: 'GET',params: { id: 123 }}).then(response => {console.log('数据:', response);}).catch(error => {console.log('请求失败:', error);});}}
}

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秒});
}