一、效果展示

失败效果

成功效果

二、写入后端请求部分

分析

①自定义一个模块common.js主要用于封装所有的请求函数

②核心代码
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  {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;});

完整代码

//定义全局变量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) {//httpif (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  {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,}

三、进行方法的调用

核心代码

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

完整代码

//执行加载中的效果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'})});