2025 uniapp的请求封装工具类以及使用【拿来就用】

一、创建一个http请求封装的js文件，名字自定义：my_http.js

/**
 * 基础API请求地址（常量，全大写命名规范）
 * @type {string}
 * @constant
 */
let BASE_URL = ''
 //通过环境来判断基础路径
if (process.env.NODE_ENV === 'development') {
	BASE_URL="本地/局域网后端接口"
} else {
	BASE_URL='网上（服务器）接口'
}
 
/**
 * 封装的HTTP请求核心函数
 * @param {string} url - 请求的接口路径（不需要包含基础接口URL）
 * @param {Object} [data={}] - 请求参数，默认为空对象
 * @param {string} [method='GET'] - HTTP方法，默认GET,支持GET/POST/DELETE/PUT等
 * @returns {Promise} - 返回Promise便于链式调用
 * 
 */
export default function http(url, data = {}, method = 'GET') {
	// 返回一个Promise对象，支持外部链式调用
	return new Promise((resolve, reject) => {
		// 调用uni-app的底层请求API
		uni.request({
			// 拼接完整请求地址（基础接口URL +  请求的接口路径）
			url: BASE_URL + url,
 
			// 请求参数（GET请求时会自动转为query string）
			data: data,
 
			// 请求方法（转换为大写保证兼容性）
			method: method.toUpperCase(),
 
			// 请求头配置
			header: {
				// 从本地存储获取token，没有就位空
				'token': uni.getStorageSync('token') || '',
				// 默认JSON格式
				'Content-Type': 'application/json'
			},
 
			// 请求成功回调（注意：只要收到服务器响应就会触发，无论HTTP状态码）
			success: (res) => {
				/* HTTP层状态码处理（4xx/5xx等也会进入success回调） */
				if (res.statusCode !== 200) {
					const errMsg = `[${res.statusCode}]${res.errMsg || '请求失败'}`
					showErrorToast(errMsg)
					// 使用Error对象传递更多错误信息
					reject(errMsg)
				}
 
				/* 业务层状态码处理（假设1表示成功） */
				if (res.data.code === 1) {
					// 提取业务数据（约定data字段为有效载荷）
					resolve(res.data.data)
				} else {
					// 业务错误处理
					const errMsg = res.data.msg || `业务错误[${res.data.code}]`
					showErrorToast(errMsg)
					reject(res.data.msg)
				}
			},
 
			// 请求失败回调（网络错误、超时等）
			fail: (err) => {
				const errMsg = `网络连接失败: ${err.errMsg || '未知错误'}`
				showErrorToast(errMsg)
				reject(new Error(errMsg))
			},
 
 
		})
	})
}
 
/**
 * 显示统一格式的错误提示（私有工具方法）
 * @param {string} message - 需要显示的错误信息
 * @private
 */
function showErrorToast(message) {
	uni.showToast({
		title: message, // 提示内容
		icon: 'none', // 不显示图标
		duration: 3000 // 3秒后自动关闭
	})
}

二、在创建一个调用具体http请求接口的js文件，名字自定义：my_api.js

// 引入公共的请求封装my_http.js（根据你自己实际的路径引入）
import http from './my_http.js'

// 获取bannner列表【无参数】
export const getBannerList = () => {
	return http('/banner/list')
}

// 登录【url接口链接 ? 参数1=参数值1 & 参数2=参数值2】
export const login = (uname, upwd) => {
	return http('/login', {
		uname: uname,
		upwd: upwd
	})
}

三、调用http请求接口获取数据