Реагируйте, как сделать запрос POST в For Loop

Question

У меня есть следующая функция, которая направлена ​​на удаление всех элементов в таблице.
Ключевое поле каждой строки хранится в rowKeys с текущим содержанием ["www.google.com", "www.youtube.com", "www.facebook.com"]

async onAfterDeleteRow(rowKeys) {
    for(let i = 0; i < rowKeys.length; i++){
        console.log(rowKeys.length);  //3
        console.log(rowKeys[i]);  //www.google.com

        this.setState({
            deleting: true,
            jsonBefore: this.state.json
        });

        console.log("About to post");  //About to post

        const response = await
            fetch('/delete-cert', {
                headers: {
                    'Content-Type': 'application/json'
                },

                method: 'POST',
                body: JSON.stringify({deletedCert: rowKeys[i]})
            });

        console.log("Post done");

        const body = await response.text();
        if (response.status !== 200) throw Error(body.message);
    }

    console.log("Left For Loop");
}

Следующие 3 строки выводятся на консоль:

3  
www.google.com  
About to post  

Но он НЕ печатает 2 строки:

Post done  
Left For Loop

Он успешно удаляет www.google.com, но не следующие 2 элемента в массиве, есть идеи, почему эта итерация не работает?

Answer 1

Скорее всего, выборка не разрешается или выдает ошибку. Поскольку вы ждете этого оператора, выполнение другого кода никогда не произойдет.

Лучше всего выполнить все запросы и подождать, пока все они не будут завершены (см. Promise.all () ).

async onAfterDeleteRow(rowKeys) {
    // a list of all request promises
    let requests = [];
    
    for(let i = 0; i < rowKeys.length; i++){
        console.log(rowKeys.length);  //3
        console.log(rowKeys[i]);  //www.google.com

        this.setState({
            deleting: true,
            jsonBefore: Kthis.state.json
        });

        requests.push( 
            fetch('/delete-cert', {
                headers: {
                    'Content-Type': 'application/json'
                },

                method: 'POST',
                body: JSON.stringify({deletedCert: rowKeys[i]})
            }).then(async (response)=>{
                const body = await response.text();
                if (response.status !== 200) throw Error(body.message);
                // if everything is fine resiolve to true or for example your body content
                return Promise.resolve(true);
            }).catch((e)=>{
                // if we encounter an error resolve to false
                console.error('there was an error:', e.message)
                return Promise.resolve(false);
            })
        )
    }
    console.log("Left For Loop");

    // wait until all requests are done!
    await Promise.all(requests).then((results)=>{
        // here we have all the results
        console.log('all requests finished!', results);
        for(let i = 0; i < requests.length; i++){
          console.log(i, 'request resultet in', results[i]);
        }
    })
}