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

Question

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

    })
}

Why do you need a delay? Promises are here for this kind of situation. In your last .then method of your first fetch, you can use the second fetch. Can't you? — devserkan
– devserkan, Commented Oct 11, 2018 at 22:28

Chaim Friedman · Accepted Answer · 2018-10-11 22:29:19Z

1

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

        })
    })
}

answered Oct 11, 2018 at 22:29

Chaim Friedman

6,2714 gold badges37 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rlemon Over a year ago

just a suggestion, if you return the inner fetch, you can not nest the .then chain. slightly cleaner.

devserkan · Accepted Answer · 2018-10-11 22:50:59Z

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.
  };

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related