在fetch中使用fetch并不是执行所有的fetch请求

Question

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

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 => {
    })
}

在我的代码中，只有first fetch，即"DELETE“会被执行？我做错了什么？

Answer 1

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

Answer 2

我宁愿这样做，创建一个生命，并为后续的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);
}