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'
		})
	});
相关推荐
风雨兼程^_^10 小时前
ai生成文章,流式传输(uniapp,微信小程序)
ai·微信小程序·uni-app·流式传输
2501_9159184118 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_9151063219 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
iOS阿玮1 天前
苹果卡审情况将逐步缓解,合规的开发者请耐心等待~
uni-app·app·apple
2501_916013741 天前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915918411 天前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张1 天前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
耶啵奶膘2 天前
uni-app头像叠加显示
开发语言·javascript·uni-app
chéng ௹2 天前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
吴传逞2 天前
记一次uniapp+nutui-uniapp搭建项目
uni-app