vue3 前端 去循环一个接口获取结果
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
有的时候 在我们开发过程中我i们会出现一个问题 就是一个后端的接口 哦我们需要调用多次才会出现结果 我们就需要连续掉用
有时候为了避免后端的压力的太大
我总结了一下前端的写法
1.有次数限制的
const getPayData = async (orderId) => {
const orderResult = await indexApi.submitOrderResult({ orderId });
if (orderResult.state == 200 && orderResult.code == 200) {
return orderResult; // 返回订单结果
}
};
const pollOrderResult = async (orderId, maxTries, delay) => {
if (maxTries <= 0) {
// 达到最大尝试次数,停止轮询
console.error("达到最大尝试次数,未获取到订单结果");
return null; // 返回 null 或抛出错误表示失败
}
try {
// 调用接口获取订单结果
const orderResult = await indexApi.submitOrderResult({ orderId });
// 检查订单结果是否满足条件
if (orderResult.state == 200) {
switch (orderResult.code) {
case 200:
// 订单已处理完成,停止轮询
console.log("订单处理完成", orderResult);
Taro.hideLoading();
return orderResult.data; // 返回订单结果
case 202:
// 订单仍在处理中(可能是一个特殊的成功状态码)
console.log("订单仍在处理中(202),稍后重试...");
// 注意:这里你可能不需要返回,因为不是错误,但也不是完成
// 如果想继续轮询,则不要返回,让函数继续执行
Taro.hideLoading();
break;
case 503:
// 服务器内部错误
console.error("服务器内部错误,稍后重试...");
// 你可以选择在这里继续轮询,或者返回错误
// 如果选择继续轮询,则不要返回
break;
default:
// 其他未知的错误码
console.error("未知的订单结果错误码", orderResult.code);
// 你可以在这里决定是继续轮询还是返回错误
break;
}
} else {
// HTTP状态码不是200,通常表示有错误发生
console.error("HTTP状态码错误", orderResult.state);
// 在这里你可以选择继续轮询,返回null,或者抛出错误
}
// 如果未达到终止条件,则等待一段时间后再次尝试
console.log("订单仍在处理中,稍后重试...");
await new Promise((resolve) => setTimeout(resolve, delay));
// 递归调用自己进行下一轮轮询
return await pollOrderResult(orderId, maxTries - 1, delay);
} catch (error) {
// 处理获取订单结果时出现的错误
// 可以选择重试、记录错误或停止轮询等
console.error("获取订单结果时出错", error);
// 如果错误允许重试,并且还有剩余尝试次数,则递归调用自己
if (maxTries > 1) {
return await pollOrderResult(orderId, maxTries - 1, delay);
} else {
// 如果没有剩余尝试次数,则返回null或抛出错误
return null; // 或者抛出错误
}
}
};
调用
只要有结果就会停止 这样写次数 是为了防止 前端死循环
2.没有次数 的写法
let shouldStopPolling = false; // 外部变量或标志来控制轮询是否应该停止
const pollOrderResult = async (orderId, delay) => {
if (shouldStopPolling) {
return; // 如果应该停止轮询,则直接返回
}
try {
const orderResult = await indexApi.submitOrderResult({ orderId });
if (orderResult.state == 200) {
switch (orderResult.code) {
case 200:
console.log("订单处理完成", orderResult);
Taro.hideLoading();
shouldStopPolling = true; // 设置标志以停止轮询
return orderResult.data;
case 202:
console.log("订单仍在处理中(202),稍后重试...");
Taro.hideLoading(); // 可能不需要在这里隐藏加载,因为订单还在处理中
break;
case 503:
console.error("服务器内部错误,稍后重试...");
// 对于某些错误,您可能想设置应该停止轮询,或者只是等待并重试
break;
default:
console.error("未知的订单结果错误码", orderResult.code);
// 对于某些错误,您可能想设置应该停止轮询
break;
}
} else {
console.error("HTTP状态码错误", orderResult.state);
}
// 如果订单没有处理完成,等待并重试
if (!shouldStopPolling) {
console.log("订单仍在处理中,稍后重试...");
await new Promise((resolve) => setTimeout(resolve, delay));
await pollOrderResult(orderId, delay); // 递归调用自己
}
} catch (error) {
console.error("获取订单结果时出错", error);
// 对于某些错误,您可能想设置应该停止轮询
// 这里我们假设除非明确设置,否则继续轮询
if (!shouldStopPolling) {
await new Promise((resolve) => setTimeout(resolve, delay));
await pollOrderResult(orderId, delay); // 递归调用自己
}
}
};
// 调用轮询函数
pollOrderResult(someOrderId, someDelay);
// 当需要停止轮询时,设置 shouldStopPolling 为 true
// 例如,在某个用户操作或外部事件后
// shouldStopPolling = true;
各有各的好处吧 这个是 一直等到有结果的时候 终止循环 但是 会容易导致死循环 如果没有处理好的话
GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:3 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 5 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献9条内容
所有评论(0)