CODEWITHSUNDEEP
javascriptreactjsfetch-api
develop05
develop05

Reputation: 485

making two fetch requests in one function with a delay in between

so I have 2 endpoints, I'm making a "post" request to the first one and in the response I should get some kind of id that I use in the second request endpoint url. so I want to make a delay or something till I get the response from the first request.

req = () => {
  fetch('url', {
      method: 'POST',
      headers: {
        'Authorization': bearer,
        'Content-Type': 'application/json',
      },
      body: 
    })
    .then(response => response.json())
    .then(json => {

    })
  fetch(`url with the id I get from the first request`, {
      method: 'GET',
      headers: {
        'Authorization': bearer,
        'Content-Type': 'application/json',
      }
    })
    .then(response => response.json())
    .then(json => {

    })
}

Upvotes: 1

Views: 1982

Answers (2)

devserkan
devserkan

Reputation: 17608

You can chain your second fetch request in your first request as:

req = () => {
  fetch("url", {
    method: "POST",
    headers: {
      Authorization: bearer,
      "Content-Type": "application/json"
    }
    body:
  })
    .then(response => response.json())
    .then(json => {
      fetch("url with the id I get from the first request", {
        method: "GET",
        headers: {
          Authorization: bearer,
          "Content-Type": "application/json"
        }
      })
        .then(response => response.json())
        .then(json => {});
    });
};

Or you can use async/await.

req = async () => {
    const first = await ( await fetch( "url", {
      method: "POST",
      headers: {
        Authorization: bearer,
        "Content-Type": "application/json",
      },
      body:
    } ) ).json();

    const second = await ( await fetch( `http://some.url${ first.id }` ),
    {
      method: "GET",
      headers: {
        Authorization: bearer,
        "Content-Type": "application/json",
      },
    } ).json();

    // use the variable second as your last result here.
  };

Upvotes: 0

Chaim Friedman
Chaim Friedman

Reputation: 6253

There is no need for a delay per se. You can place your second request in the .then of the first request. This will ensure that your second request will run only once the first one has resolved. Another important note here, is that if you need a value of the first response in order to make the second request, you can only do that in the .then of the first request because otherwise the value you need to make the second request will be out of scope. Here is your code with the required modification. 

req = () => {
  fetch('url', {
    method: 'POST',
    headers: {
      'Authorization': bearer,
      'Content-Type': 'application/json',
    },
    body: 
    })
    .then(response => response.json())
    .then(json => {
      fetch(`url with json.id or whatever`, {
        method: 'GET',
        headers: {
          'Authorization': bearer,
          'Content-Type': 'application/json',
        }
      })
        .then(response => response.json())
        .then(json => {

        })
    })
}

Upvotes: 1

Related Questions