在 fetch 中使用 fetch 不会执行所有 fetch 请求答案

【问题标题】：Using fetch inside fetch is not executing all the fetch requests在 fetch 中使用 fetch 不会执行所有 fetch 请求
【发布时间】：2020-05-20 16:20:02
【问题描述】：

我正在尝试一个一个地执行三个获取请求。每个获取请求都应在前一个获取请求完成时触发。下面是我的代码

const chopSegment = (token, frame_tag_url, tag_to_delete_id, chopped_tag_array, tags_for_index_update) => (dispatch) =>  {
    let req = fetch(frame_tag_url + tag_to_delete_id + "/",
        {
            method: "DELETE",
            headers: {
                "Authorization": "Token " + token,
                "content-type": "application/json"
            }
        })
    req.then(response => {
        if (!response.ok) {
            throw response;
        }
        else
            return response.json();
    }).then(response => {
        return fetch(frame_tag_url,
            {
                method: "POST",
                headers: {
                    "Authorization": "Token " + token,
                    "content-type": "application/json",
                },
                body : JSON.stringify(tags_for_index_update)
            }).then(response1 => {
            if (!response1.ok) {
                throw response1;
            }
            return response1.json();
        }).then(response => {
            for(let i = 0; i < chopped_tag_array.length; i++){
                return  fetch(frame_tag_url,
                    {
                        method: "POST",
                        body: JSON.stringify(chopped_tag_array[i]),
                        headers: {
                            "Authorization": "Token " + token,
                            "content-type": "application/json"
                        }
                    })
                .then(response2 => {
                    if (!response2.ok) {
                        throw response2;
                    }
                    return response2.json();
                }).then(response2 => {
                    dispatch(chopSegmentSuccess(response2))
                }).catch(error => {

                })
            }
        }).catch(error => {

        })
    }).catch(error => {
    })
}

在我的代码中，只有第一次获取，即“DELETE”被执行？我做错了什么？

【问题讨论】：

立即突出的一件事是您正在捕捉错误，然后继续忽略它们。 catch() 的重点是处理错误。
我建议从 fetch 关键字中删除 return 并重试。

标签： javascript promise fetch

【解决方案1】：

您不能在循环中进行提取。您正在返回完成的第一个提取。使用 promises 或 await/async 在循环中获取。 How to return many Promises in a loop and wait for them all to do other stuff

【讨论】：

【解决方案2】：

我宁愿这样做，创建一个 IIFE 并为后续的 fetch 请求递归调用它：

return dispatch =>{
    var ctr = 0;
    (function myFunc(url, headerObj){
        fetch(url, headerObj)
        .then(response => {
            response.json().then(data=>{
                ctr++;
                if(ctr ===1 ){ // This could be any condition, say, something on the basis of response; I have taken `ctr` as a condition
                    myFunc(url, { //You may change this even to different URL, if needed
                        method: 'POST',
                        headers: {
                            'content-type': 'application/json', 
                             'body': ...,
                             'Authorization':...

                          }
                    });
                }else if(ctr === 2){
                    myFunc(url, {
                        method: 'POST',
                        headers: {
                            'content-type': 'application/json', 
                             'body': ...,
                             'Authorization':...
                          }
                    });
                }else{
                   // Any other code
                }

            })
        })
    })(url, headerObj);
}

【讨论】：