vue3 前端 去循环一个接口获取结果

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

各有各的好处吧 这个是 一直等到有结果的时候 终止循环 但是 会容易导致死循环 如果没有处理好的话