title: Executing three fetch requests one after the other
body: <p>I have to execute three fetch requests one after the other. That means, let's say my three fetch request are:</p>
  
  <pre><code>const A =  (url) =&gt; (dispatch) =&gt; {
      let req = fetch(url, ....)
      .then(response =&gt; {
          if (!response.ok) {
              throw response;
          }
          return response.json();
      }).then(response =&gt; {
  
      }).catch(error =&gt; {
  
      })
  }
  
  
  const B =  (url) =&gt; (dispatch) =&gt; {
      let req = fetch(url, ....)
      .then(response =&gt; {
          if (!response.ok) {
              throw response;
          }
          return response.json();
      }).then(response =&gt; {
  
      }).catch(error =&gt; {
  
      })
  }
  
  
  const C=  (url) =&gt; (dispatch) =&gt; {
      let req = fetch(url, ....)
      .then(response =&gt; {
          if (!response.ok) {
              throw response;
          }
          return response.json();
      }).then(response =&gt; {
  
      }).catch(error =&gt; {
  
      })
  }
  </code></pre>
  
  <p>First "A" should get executed, then B should be executed on the completion of A, then C should be executed on the completion of B. Once A,B,C are completed, I want to execute a function</p>
  
  <pre><code>doSomething = () =&gt; {
  //do something after A, B, C are executed
  }
  </code></pre>
  
  <p>I am pretty new to "promises". Can someone please guide me on how to do this?</p>
  
  <p>Below is my actual code which I tried</p>
  
  <pre><code>const chopSegment = (token, frame_tag_url, tag_to_delete_id, chopped_tag_array, tags_for_index_update) =&gt; (dispatch) =&gt;  {
      let req = fetch(frame_tag_url + tag_to_delete_id + "/",
          {
              method: "DELETE",
              headers: {
                  "Authorization": "Token " + token,
                  "content-type": "application/json"
              }
          })
      req.then(response =&gt; {
          if (!response.ok) {
              throw response;
          }
          else
              return response.json();
      }).then(response =&gt; {
          return fetch(frame_tag_url,
              {
                  method: "POST",
                  headers: {
                      "Authorization": "Token " + token,
                      "content-type": "application/json",
                  },
                  body : JSON.stringify(tags_for_index_update)
              }).then(response1 =&gt; {
              if (!response1.ok) {
                  throw response1;
              }
              return response1.json();
          }).then(response =&gt; {
              for(let i = 0; i &lt; 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 =&gt; {
                      if (!response2.ok) {
                          throw response2;
                      }
                      return response2.json();
                  }).then(response2 =&gt; {
                      dispatch(chopSegmentSuccess(response2))
                  }).catch(error =&gt; {
  
                  })
              }
          }).catch(error =&gt; {
  
          })
      }).catch(error =&gt; {
      })
  }
  </code></pre>
  
  <p>In the above code, only first fecth ("DELETE") is getting executed. The subsequent fetches are not getting executed. </p>