uniapp 请求封装，拦截器：请求拦截、响应拦截

超级码吏

已于 2024-03-15 11:51:55 修改

阅读量5.3w

点赞数 48

CC 4.0 BY-SA版权

分类专栏：玩转移动端：uni系列文章标签： uni-app javascript 前端

于 2020-10-27 13:03:44 首次发布

本文链接：https://blog.csdn.net/qq_42618566/article/details/109308690

玩转移动端：uni系列专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一个全局请求封装的方法，该方法通过使用Promise简化了HTTP请求流程，并提供了统一的请求及响应处理逻辑。此外，还实现了加载提示和错误处理等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

全局请求封装

export function http(path, params = {}, loading = true, method = "POST") {
	console.log('%c请求拦截：', ' background:orange', params);
	if (loading) {
		uni.showLoading({
			title: "加载中",
			mask: true
		});
	};

	return new Promise((resolve, reject) => {
		uni.request({
			header: {
				Authorization: uni.getStorageSync("Authorization") || ""
			},
			url: import.meta.env.VITE_BASE_URL + path,
			method,
			data: params,
			async success(res) {
				uni.hideLoading();
				resolve(res.data);
				console.log('响应拦截：', path, params, res.data);
				if (res.data?.code !== 0) {
					uni.showToast({
						icon: "error",
						duration: 2000,
						title: res.data.msg
					});
				}

			},
			fail(err) {
				uni.hideLoading();
				uni.reLaunch({
					url: "/pages/status/service/error"
				})
				reject(err);
			},
			complete() {
				// uni.hideLoading();    // 在showToast之前执行会受影响
			}
		});
	});
};