uniapp及微信小程序封装全局网络请求，弹框和hint提示-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp及微信小程序封装全局网络请求，弹框和hint提示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

今天分享一下uniapp项目的网络请求如何封装，不知道大家开发微信小程序项目是用什么开发工具，我个人更喜欢用uniapp，无论是从项目扩展方向还是开发效率来说，uniapp都是首选。

1：创建一个项目工具库，http.js

//提示
	hint(title, duration, mask, icon) {
		uni.showToast({
			title: title,
			duration: duration ? duration : 2000,
			mask: mask,
			icon: icon == 'success' ? 'success' : icon == 'error' ? 'error' : icon == 'fail' ? 'fail' :
				icon == 'exception' ? 'exception' : icon == 'loading' ? 'loading' : 'none',
		});
	},
	//加载弹框
	loading(title, mask) {
		uni.showLoading({
			title: title,
			mask: mask
		});
	},
	//隐藏加载弹框
	hideLoading() {
		uni.hideLoading();
	},
	//模拟弹窗
	modal(content, showCancel, confirm, cancel, cancelText) {
		uni.showModal({
			title: '提示',
			content: content,
			showCancel: !showCancel,
			cancelText: cancelText ? cancelText : '取消',
			success: function(res) {
				if (res.confirm) {
					confirm()
				} else if (res.cancel) {
					cancel()
				}
			}
		});
	},
	
	//因为开发时是在浏览器开发，涉及到跨域，所以要做条件判断，浏览器做跨域处理，手机直接使用地址
	reqAddress() {
		// #ifdef H5
		return "/api"
		// #endif
		// #ifndef H5
		return "http://xxxxx"//替换成自己的地址
		// #endif
	},
	// 设置token
	setToken(data) {
		uni.setStorageSync('token', data)
	},
	
	// 获取token
	getToken() {
		return uni.getStorageSync('token')
	},
	//数据请求
	request(url, method, data, Loading, isToken,isData, isForm ) {
		if (!Loading) {
			http.loading('加载中', true)
		}
		return new Promise((resolve, reject) => {
			uni.request({
				url: http.reqAddress() + url,
				data: data,
				method: method,
				header: {
					'content-type': isForm ? 'application/x-www-form-urlencoded' :
						'application/json',
					'Authorization': isToken ? '' :http.getToken(),
				},
				dataType: 'json',
				success(res) {
					if (!Loading) {
						http.hideLoading()
					}
					if(isData){
						resolve(res)
					}else{
						if (res.data.code == 200) {
							resolve(res.data)
						} else if (res.data.code == 401) {
							http.hint("请重新登录")
							uni.reLaunch({
								url: '/pages/login/login-phone/login-phone'
							})
						} else if (res.data.code == 500) {
							resolve(res.data)
							http.hint(res.data.msg)
						} else {
							resolve()
						}
					}
				},
				fail(rej) {
					if (!Loading) {
						http.hideLoading()
					}
					http.hint("网络不给力，请稍后再试~")
					reject(rej)
				}
			})
		})
	}
}
export default http

在vite.config.js文件中配置跨域

server: {
		port: 3000,
		proxy: {
			'/api': {
				target:'http:xxxxxx', 
				changeOrigin: true,
				rewrite: path => path.replace(/^\/api/, ''),
			}
		}
	}

这样，一个全局网络请求工具就完成了，含有content-type字段判断，200,401,500状态码提示信息等功能，微信小程序的话只需要用hbuilder工具编译到微信小程序即可，谢谢观看，欢迎指正！文章来源地址https://www.toymoban.com/news/detail-735042.html

到了这里，关于uniapp及微信小程序封装全局网络请求，弹框和hint提示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！