uni-app:实现request请求的递归(设置request请求的访问次数),并且调用自定义方法给出返回值

一、效果展示

失败效果

成功效果

二、写入后端请求部分

分析

①自定义一个模块common.js主要用于封装所有的请求函数
②核心代码
javascript 复制代码
function requestWithRetry(cmd, username, password, retryCount) {
	return new Promise((resolve, reject) => {
		uni.request({
			url: ip + 'sys/user/login',
			data: {
				cmd: cmd,
				usrname: username,
				passwd: password
			},
			method: 'POST',
			dataType: 'json',
			header: {
				"content-type": "application/json"
			},
			success: res => {
				// 存入全局变量中
				getApp().globalData.username = username;
				getApp().globalData.password = password;
				getApp().globalData.access_token = res.data.access_token;
				getApp().globalData.loginmode = loginmode;
				console.log(`第 ${retryCount} 次请求成功:`, res.data);
				resolve(res.data);
			},
			fail(err) {
				console.error(`第 ${retryCount} 次请求失败,剩余重试次数 ${retryCount - 1}:`, err)
				if (retryCount <= 1) {
					// 重试次数已经用完,将错误信息返回给调用者
					reject(new Error('请求失败'))
				} else {
					// 还有重试次数,继续重试
					setTimeout(() => {
						requestWithRetry(cmd, username, password,
							retryCount - 1).then(resolve).catch(reject)
					}, 500)
				}
			}
		});
	});
}
// 调用方法,retryCount 为重试次数
return requestWithRetry(cmd, username, password, 3)
	.then(data => {
		// console.log('请求成功', data);
		return data;
	})
	.catch(error => {
		// console.log('请求失败', error);
		throw error;
	});

完整代码

javascript 复制代码
//定义全局变量
const ip = 'XXXX';
//定义全局函数
//生成随机三位数 
function generateRandomNumber() {
	var min = 100;
	var max = 999;
	var randomNumber = Math.floor(Math.random() * (max - min + 1) + min);
	return randomNumber;
}
//http方式进行登录
function login_httpmode(username, password, cmd, loginmode) {
    //http
    if (loginmode == 'http') {
        function requestWithRetry(cmd, username, password, retryCount) {
            return new Promise((resolve, reject) => {
                uni.request({
                    url: ip + 'sys/user/login',
                    data: {
                        cmd: cmd,
                        usrname: username,
                        passwd: password
                    },
                    method: 'POST',
                    dataType: 'json',
                    header: {
                        "content-type": "application/json"
                    },
                    success: res => {
                        // 存入全局变量中
                        getApp().globalData.username = username;
                        getApp().globalData.password = password;
                        getApp().globalData.access_token = res.data.access_token;
                        getApp().globalData.loginmode = loginmode;
                        console.log(`第 ${retryCount} 次请求成功:`, res.data);
                        resolve(res.data);
                    },
                    fail(err) {
                        console.error(`第 ${retryCount} 次请求失败,剩余重试次数 ${retryCount - 1}:`, err)
                        if (retryCount <= 1) {
                            // 重试次数已经用完,将错误信息返回给调用者
                            reject(new Error('请求失败'))
                        } else {
                            // 还有重试次数,继续重试
                            setTimeout(() => {
                                requestWithRetry(cmd, username, password,
                                    retryCount - 1).then(resolve).catch(reject)
                            }, 500)
                        }
                    }
                });
            });
        }
        // 调用方法,retryCount 为重试次数,设置最大次数为三次
        return requestWithRetry(cmd, username, password, 3)
            .then(data => {
                // console.log('请求成功', data);
                return data;
            })
            .catch(error => {
                // console.log('请求失败', error);
                throw error;
            });
    }
}
//导出
module.exports = {
	ip,
	generateRandomNumber,
	login_httpmode,
}

三、进行方法的调用

核心代码

javascript 复制代码
common.login_httpmode(username, password, cmd, type)
	.then(info => {
		console.log("请求成功",info)		
	})
	.catch(error => {
		console.log("请求失败",error)		
	});

完整代码

javascript 复制代码
//执行加载中的效果
uni.showLoading({
	title: '正在登录...',
	mask: true,
});
//调用登录方法
common.login_httpmode(username, password, cmd, type)
     //成功返回
	.then(info => {
		console.log("请求成功",info)
		if (info.success == true) {	
            uni.hideLoading(); // 隐藏加载提示
			//全局变量中的数据 
			uni.reLaunch({ //跳转到主页
				url: '/pages/mine/mine_index/mine_index'
			})
		} else {
			uni.hideLoading(); // 隐藏加载提示
			if (info.msg == 'pass err') {
				uni.showToast({
					title: '账号密码不正确',
					icon: 'none'
				})
			}
		}
	})
	.catch(error => {
		console.log("请求失败",error)
		uni.showToast({
			title: '登录失败',
			icon: 'none'
		})
	});
相关推荐
PedroQue9915 小时前
unix-utils v0.2.0 发布:modal 全端统一,自绘窗口解决输入框难题
前端·uni-app
2301_32241428043 天前
springboot学生课堂出勤统计系统15835-计算机毕设 原创(免费领源码+部署教程+开发环境)
java·mysql·随机森林·微信小程序·uni-app·微信开发者工具·推荐算法
2501_915921435 天前
iOS应用从开发到上架App Store的完整步骤详解
android·ios·小程序·https·uni-app·iphone·webview
小蒜学长6 天前
基于SpringBoot+uni-app的闪洁家政系统的设计与实现(代码+数据库+LW)
java·spring boot·后端·uni-app·家政服务
anyup_前端梦工厂7 天前
uni-app 模板 Starter 一键清理 Skill 发布
前端·人工智能·uni-app
anyup_前端梦工厂7 天前
将uni-app工程迁移uni-app x,AI 能帮我们做什么?
前端·人工智能·uni-app
蒿豪郝灬号7 天前
UniApp接入鸿蒙版阿里百川
华为·uni-app·harmonyos
2501_915921438 天前
详细教程:使用Perfdog工具测量iOS应用的功耗性能与优化方法
android·macos·ios·小程序·uni-app·cocoa·iphone
梦曦i8 天前
uni-app、uni-app x 与 Flutter 深度对比:2026年跨平台开发框架选型指南
flutter·uni-app·uni-app x
普马萨特9 天前
uni-app x 定位踩坑实录:H5/小程序/App 统一经纬度与逆地理编码
uni-app