使用

创建实例

// 引入 Pure Request
import PureRequest from "@/uni_modules/pure-request";

// 创建公共的请求实例
const instance = new PureRequest({
	// 接口基准前缀
	baseURL: import.meta.env?.VITE_API_BASE_URL || "",

	// 请求状态码配置
	// - 表示请求成功的状态码
	// - 可以是数字，数组或对象
	// - 数字
	// successStatusCode: 200, // 只有状态码为 200 时才表示请求成功
	// 数组
	// successStatusCode: [200, 201, 202], // 状态码为 200, 201, 202 中的任何一个时就表示请求成功
	// 对象
	successStatusCode: {
		// 状态码 >= 200
		start: 200,
		// 并且状态码 < 300，注意：不包含 300，时表示请求成功
		end: 300
	},

	// 数据状态码配置
	// - 表示数据状态的状态码
	// - 可以是数字，数组或对象，具体用法同上方的 `successStatusCode`
	successDataCode: 0,

	// Header
	header: {
		// 这里建议放置静态的 Header 数据
		// 动态的 Header 数据建议放到 `before` 中
		// 因为在初始化实例时，这里的值就固定了，每次请求不会变化
	},

	/**
	 * 请求前的处理函数
	 * @param {Object} config - 本次请求的配置数据
	 * @returns {Any} - 如果返回 null 则表示拦截请求，否则请求继续
	 */
	before: (config) => {
		console.log("Pure Request : 请求前的处理函数 ::", config);

		// 设置动态 Header 数据
		config.header["X-Tenant-ID"] = "admin";
		config.header["Authorization"] = "TOKEN";

		// 最后返回 config
		return config;
	},

	/**
	 * 请求后的处理函数
	 * @param {Object} res - 本次请求返回体，其中 res.config 为本次请求的配置数据
	 * @returns {Any} - 如果返回 null 则表示继续 Pure Request 后续的处理逻辑，本次请求返回该函数的返回值
	 */
	// res: 本次请求返回体
	after: async (res) => {
		console.log("Pure Request : 请求后的处理函数 ::", res);

		// statusCode - 401 -- 无效的ToKen
		// if (res.statusCode === 401) {
		//     // 1. 清除用户数据
		//     // ...

		//     // 2. Token 为空 || Refresh Token 为空 || 当前请求就是刷新 Token 的请求
		//     if (!实际的Token值 || !实际的RefreshToken值 || 实际的更新Token的状态) {
		//         // 1. 清除Tokens
		//         // 1.1. 清除Access Token
		//         // 1.2. 清除Refresh Token
		//         // ...

		//         // 2. 清除重试请求的队列
		//         // ...

		//         // 3. 跳转到登录页面或弹窗提示
		//         // 3.1. 避免重复跳转或重复弹窗
		//         if (!是否已跳转或已弹窗的Flag) {
		//             // 标记为已跳转或已弹窗
		//             是否已跳转或已弹窗的Flag = true;

		//             // 跳转到登录页面
		//             // 注意：建议在进入登录页面时更新 `是否已跳转或已弹窗的Flag` 为 `true`，离开登录页面时更新为 `false`
		//             // ...
		//         }

		//         // 返回 Promise 失败状态
		//         return Promise.reject(res);
		//     }

		//     // 3. 若正在刷新 Token，将当前请求加入队列（返回Promise等待重试）
		//     if (是否正在更新Token的Flag) {
		//         return new Promise((resolve, reject) => {
		//             重试请求队列.push({
		//                 config: res?.config,
		//                 resolve,
		//                 reject
		//             });
		//         });
		//     }

		//     // 4. 更新 Token 刷新状态
		//     是否正在更新Token的Flag = true;

		//     // 5. 刷新 Token
		//     let 刷新结果 = false;
		//     await 刷新Token的接口方法({
		//         data: {
		//             refresh_token: 刷新Token的值
		//         }
		//     }).then(resp => {
		//         // 刷新成功
		//         刷新结果 = true;

		//         // 更新 Token
		//         // uni.setStorageSync('accessToken', resp?.data?.access_token);

		//         // 批量重试队列中的所有请求
		//         重试请求队列?.forEach(item => {
		//             item.resolve(instance.request(item.config));
		//         });
		//     }).catch(error => {
		//         // 刷新失败
		//         刷新结果 = false;

		//         // 刷新 Token 失败（如 Refresh Token 过期），需跳转登录，清空队列
		//         // 通知所有队列请求 “刷新失败”
		//         重试请求队列?.forEach(item => {
		//             item.reject(error);
		//         });

		//         // 清除Tokens
		//         // - 清除Access Token
		//         // - 清除Refresh Token
		//         // ...

		//         // 跳转到登录页面
		//         // ...
		//     }).finally(() => {
		//         // 无论刷新成功/失败，都重置状态（解锁 + 清空队列）
		//         是否正在更新Token的Flag = false;
		//         重试请求队列 = [];
		//     });

		//     // 刷新成功重试本次请求
		//     if (刷新结果) return instance.request(res.config);
		//     // 否则，本次请求直接返回失败
		//     return Promise.reject(res);
		// }

		// 返回 null 表示让 Pure-Request 继续处理
		return null;
	}
});
export default instance;

创建请求函数

// 示例：Get
export function apiGetDemo(config = {}) {
	config.url = "/fapi/activity/types";
	return instance.get(config);
}

// 示例：Post
export function apiPostDemo(config = {}) {
	config.url = "/fapi/activity/detail";
	return instance.post(config);
}

// 示例：Upload
export function apiUploadDemo(config = {}) {
	config.url = "/fapi/upload";
	return instance.upload(config);
}

请求数据

vue

<script setup>
	import { apiGetDemo } from "@/services";

	// 示例：Get
	apiGetDemo()
		.then((res) => {
			console.log("请求成功 ::", res);
		})
		.catch((err) => {
			console.log("请求失败 ::", err);
		});
</script>

使用 ​

创建实例 ​

创建请求函数 ​

请求数据 ​

使用

创建实例

创建请求函数

请求数据