有的时候 在我们开发过程中我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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐