Question

我问你一个与for循环和promise有关的问题。

所以要解释这种情况：我有一个for循环，它将运行多次。此循环使用fetch发布到API。根据每个POST请求的响应返回的内容，如果要满足特定条件，我想中断循环。

因此，例如，如果将循环设置为运行5次，但在第3次迭代中满足了中断条件，则我不想执行其余部分，因此会阻止其他POST请求执行。

我认为一旦看到代码，您就会理解该问题：

send: function () {
    const procedure = 'someProcedure';
    const fields = document.querySelectorAll('.field');
    for(let i = 0; i < fields.length; i++) {
        const obj = {
            procedure: procedure,
            saunaScheduleId: fields[i].dataset.id,
            guestMediumHID: '',
            guestMediumNumber: fields[i].innerHTML
        };
        fetch(EventBooking.variables.api, {
            method: "POST",
            mode: 'cors',
            redirect: 'follow',
            headers: new Headers({ 'Content-Type': 'application/json; charset=utf-8' }),
            body: JSON.stringify(obj)
        })
        .then(response => response.json())
        .then(data => {
            if (data[0].resultCode == 3) {
                console.log(obj.guestMediumNumber + ' booked this event.');
                return;
            }
            else if(data[0].resultCode == 0 && i == fields.length - 1) {
                console.log('Booking completed successfully!');
                EventBooking.booking.clear();
            }
        });
    }
}

据我了解，它与for循环有关，以某种方式在API调用之前完成。成功执行所有调用后，第二个if循环似乎运行良好，它将为所有调用显示一条消息。

您将如何处理这种情况？

感谢您的帮助。干杯！

Answer 1

使用递归

send: function () {
    const procedure = 'someProcedure';
    const fields = document.querySelectorAll('.field');
    const fetching = index => {
        if (index >= fields.length) return;
        const obj = {
            procedure: procedure,
            saunaScheduleId: fields[index].dataset.id,
            guestMediumHID: '',
            guestMediumNumber: fields[index].innerHTML
        };
        fetch(EventBooking.variables.api, {
            method: "POST",
            mode: 'cors',
            redirect: 'follow',
            headers: new Headers({ 'Content-Type': 'application/json; charset=utf-8' }),
            body: JSON.stringify(obj)
        })
        .then(response => response.json())
        .then(data => {
            if (data[0].resultCode == 3) {
                console.log(obj.guestMediumNumber + ' booked this event.');
                return;
            }
            else if(data[0].resultCode == 0 && index == fields.length - 1) {
                console.log('Booking completed successfully!');
                EventBooking.booking.clear();
            }
            fetching(index + 1);
        });
    };
    fetching(0);
}

Answer 2

我已经决定要这样做：

看起来很干净而且可以正常工作。

send: async function () {
        const procedure = 'SaveSaunaEventBooking';
        const fields = document.querySelectorAll('.field');
        for(let i = 0; i < fields.length; i++) {
            const obj = {
                procedure: procedure,
                saunaScheduleId: fields[i].dataset.id,
                guestMediumHID: '',
                guestMediumNumber: fields[i].innerHTML
            };
            let response = await fetch(EventBooking.variables.api, {
                method: "POST",
                mode: 'cors',
                redirect: 'follow',
                headers: new Headers({ 'Content-Type': 'application/json; charset=utf-8' }),
                body: JSON.stringify(obj)
            })
            let data = await response.json();
            if (data[0].resultCode == 3) {
                console.log(obj.guestMediumNumber + ' booked this event.');
                return;
            }
            else if (data[0].resultCode == 0 && i == fields.length - 1) {
                console.log('Booking completed successfully!');
                EventBooking.booking.clear();
            }

        }

感谢您的所有想法和帮助！：）

打破承诺的循环

2 个答案: