uniapp 公共方法封装公共请求封装

男娘i 2021-07-24 20:05 1512阅读 0赞

一般我都习惯把公共js封装到util这个文件夹下

常见的的方法，手机号验证，邮箱验证等方法我都会写到util下的util.js里

![20201117155628745.png][]

util.js代码

# *-------------------------完整的验证封装代码--------------------------* #

//校验邮箱格式
    function checkEmail(email) {
    	return RegExp(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/).test(
    		email);
    }
    //校验手机格式
    function checkMobile(mobile) {
    	return RegExp(/^1[34578]\d{9}$/).test(mobile);
    }
    
    module.exports = {
    	checkEmail: checkEmail,
    	checkMobile: checkMobile
    }

*----------------------------------------------------*

**封装好的方法一定到暴露出来，要不使用的时候是找不到的**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][]

首选需要获取手机号，邮箱

** data中的数据一定要return出来  ，下面是获取不到的**

data() {
    		return {
    			eml: '',
    			phone:''
    		};
    	},
    // 输入邮箱
    	methods: {
    		eml_input(e) {
    			console.log(e);
    			this.eml = e.detail.value;
    		},
    		// 验证邮箱
    		yz_eml() {
    			if (this.eml == '') {
    				uni.showToast({ title: '请输入邮箱', icon: 'none' });
    				return;
    			}
    			if (!until.checkEmail(this.eml)) {
    				uni.showToast({ title: '邮箱格式错误', icon: 'none' });
    				return;
    			}
    		},
    	}

** 使用的时候一点要先将js文件引入**

**import until from '@/util/util.js';**

该方法仅简单验证

**下面为请求封装**

![20201117162129237.png][]

# *-------------------------完整的请求封装代码--------------------------* #

**// 请求域名  
var rqUrl = ''**

api.js

// 请求头
    var rqUrl = '域名'
    // 请求处理
    function requst(url, data, post_get) {
    	return new Promise((resolve, reject) => {
    		uni.request({
    			url: this.rqUrl + url,
    			method: post_get || "GET",
    			data: data || {},
    			header: {
    				'content-type': 'application/json'
    			},
    			success: (res) => {
    				console.log(res)
    			
    				resolve(res)
    			},
    			fail: (res) => {
    				uni.showToast({
    					title: "接口请求失败"
    				})
    				reject(res)
    			}
    		})
    	})
    }
    
    module.exports = {
    	rqUrl: rqUrl,
    	requst: requst,
    }

*---------------------------------------------------*

**使用方法**

data 接口参数

post请求方式

// 请求使用
    		yz_api() {
    			let data = {};
    			reqAPI.requst('接口', data, 'post').then(res => {
    				console.log('返回数据', res);
    				
    			});
    		}

# *-------------------------完整的使用代码--------------------------* #

<template>
    	<view class="">
    		<view class="bor">
    			<view class="lf_text">邮箱：</view>
    			<input class="rt_input" type="text" value="" @input="eml_input" />
    		</view>
    		<view class="bor yz_btn" @click="yz_eml">enm验证</view>
    		<view class="bor">
    			<view class="lf_text">手机号：</view>
    			<input class="rt_input" type="text" value="" @input="phone_input" />
    		</view>
    		<view class="bor yz_btn" @click="yz_phone">phone验证</view>
    		<view class="bor yz_btn" @click="yz_api">接口验证</view>
    	</view>
    </template>
    
    <script>
    import until from '@/util/util.js';
    import reqAPI from '@/util/api.js';
    export default {
    	data() {
    		return {
    			eml: '',
    			phone: ''
    		};
    	},
    	methods: {
    		// 输入邮箱
    		eml_input(e) {
    			console.log(e);
    			this.eml = e.detail.value;
    		},
    		// 验证邮箱
    		yz_eml() {
    			if (this.eml == '') {
    				uni.showToast({ title: '请输入邮箱', icon: 'none' });
    				return;
    			}
    			if (!until.checkEmail(this.eml)) {
    				uni.showToast({ title: '邮箱格式错误', icon: 'none' });
    				return;
    			}
    		},
    		// 输入手机号
    		phone_input(e) {
    			console.log(e);
    			this.phone = e.detail.value;
    		},
    		// 验证手机号
    		yz_phone() {
    			if (this.phone == '') {
    				uni.showToast({ title: '请输入手机号', icon: 'none' });
    				return;
    			}
    			if (!until.checkMobile(this.phone)) {
    				uni.showToast({ title: '手机号错误', icon: 'none' });
    				return;
    			}
    		},
    		// 请求使用
    		yz_api() {
    			let data = {};
    			reqAPI.requst('/api/School/Login', data, 'post').then(res => {
    				console.log('返回数据', res);
    				
    			});
    		}
    	}
    };
    </script>
    
    <style lang="less">
    .bor {
    	display: flex;
    	flex-direction: row;
    	margin: 30rpx;
    	.lf_text {
    		color: #999;
    		padding: 10rpx;
    	}
    	.rt_input {
    		border: 1rpx solid #ccc;
    		padding: 10rpx;
    	}
    }
    .yz_btn {
    	padding: 20rpx;
    	width: 200rpx;
    	background-color: #ccc;
    	text-align: center;
    }
    </style>

[20201117155628745.png]: /images/20210724/4e54f746280f4bb087d770d8de6fb55f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: /images/20210724/1b265713b00f4c86879a12cab38e422b.png
[20201117162129237.png]: /images/20210724/15d0c1b81dc74b158c4cf3cbdea5db7b.png