Javascript 打破承诺的循环

我来问你一个关于for循环和承诺的问题

为了解释这种情况：我有一个

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();
            }
        });
    }
}

send:function（）{
const procedure='someProcedure'；
const fields=document.queryselectoral（'.field'）；
for（设i=0；iresponse.json（））
。然后（数据=>{
if（数据[0]。结果代码==3）{
console.log（obj.guestMediumNumber+“预订此事件”）；
返回；
}
else if（数据[0].resultCode==0&&i==fields.length-1）{
console.log（'预订成功完成！'）；
EventBooking.booking.clear（）；
}
});
}
}

从我所读到的内容来看，它与

for

循环在API调用之前的某种方式有关。 第二个if在循环中似乎做得很好，一旦所有调用都成功执行，它将为所有调用显示一条消息

你将如何处理这种情况

谢谢你的帮助。 干杯

使用递归

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);
}

使用递归

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);
}

---

我决定这样做：

看起来很干净，很管用

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();
            }

        }

send:async函数（）{
const procedure='savesanaeventbooking'；
const fields=document.queryselectoral（'.field'）；
for（设i=0；i

---

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

我决定这样做：

看起来很干净，很管用

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();
            }

        }

send:async函数（）{
const procedure='savesanaeventbooking'；
const fields=document.queryselectoral（'.field'）；
for（设i=0；i

---

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

您需要使用

async

/

wait

。另一种方法是递归方法，而不是循环。只需在循环控制流中添加一个条件，并通过设置一个变量来满足该条件。您是对的，这将只需独立运行

fetch

调用。I如果您希望一个调用的决定取决于前一个调用的响应，那么调用需要串联运行。请查看异步库的

series

方法，在该方法中，您可以在步骤N中使用调用N-1的响应，并使用您可以调用

回调的事实（如果是真的，\uu）

停止该系列。--或者确实是@Bergi建议的

async/await

，如果您的浏览器JS支持它的话。您需要使用

async

/

await

。替代方法是递归方法，而不是循环。只需在循环控制流中添加一个条件，并通过设置一个变量来满足该条件。您可以好的，那就独立地运行

fetch

调用。如果您希望一个调用的决定取决于上一个调用的响应，那么调用需要串联运行。看看异步库的

series

方法，在该方法中，您可以在步骤N使用来自调用N-1的响应，并使用以下事实：呼叫