using a fetch inside another fetch in javascript

by

Fetch returns a promise, and you can chain multiple promises, and use the result of the 1st request in the 2nd request, and so on.

This example uses the SpaceX API to get the info of the latest launch, find the rocket’s id, and fetch the rocket’s info.

const url="https://api.spacexdata.com/v4";

const result = fetch(`${url}/launches/latest`, { method: 'get' })
  .then(response => response.json()) // pass the data as promise to next then block
  .then(data => {
    const rocketId = data.rocket;

    console.log(rocketId, '\n');
  
    return fetch(`${url}/rockets/${rocketId}`); // make a 2nd request and return a promise
  })
  .then(response => response.json())
  .catch(err => {
    console.error('Request failed', err)
  })

// I'm using the result const to show that you can continue to extend the chain from the returned promise
result.then(r => {
  console.log(r.first_stage); // 2nd request result first_stage property
});
.as-console-wrapper { max-height: 100% !important; top: 0; }

More Related Contents:

  1. How can I fetch an array of URLs with Promise.all?
  2. fetch: Reject promise with JSON error object
  3. How do I access previous promise results in a .then() chain?
  4. How to return many Promises and wait for them all before doing other stuff
  5. Can I fire and forget a promise in nodejs (ES7)?
  6. How to dodge jQuery promises completely when chaining two async jQuery functions?
  7. Cancel a vanilla ECMAScript 6 Promise chain
  8. What is the order of execution in JavaScript promises?
  9. How can I synchronously determine a JavaScript Promise’s state?
  10. When is the body of a Promise executed?
  11. ES6 Promise.all() error handle – Is .settle() needed? [duplicate]
  12. fetch resolves even if 404?
  13. multiple, sequential fetch() Promise
  14. How do I tell if an object is a Promise?
  15. How to use promise in forEach loop of array to populate an object
  16. Should a Promise.reject message be wrapped in Error?
  17. Why can I not throw inside a Promise.catch handler?
  18. Why does the Promise constructor require a function that calls ‘resolve’ when complete, but ‘then’ does not – it returns a value instead?
  19. What is the best general practice to timeout a function in promise [closed]
  20. How to handle HTTP code 4xx responses in fetch api
  21. When would someone need to create a deferred?
  22. Why does the Promise object block rendering?
  23. How to extract data out of a Promise
  24. ES6 Promise replacement of async.eachLimit / async.mapLimit
  25. Why does JavaScript Promise then handler run after other code?
  26. What are the implications of the recursive joining of Promises in terms of Monads?
  27. When is the body of a Promise constructor callback executed?
  28. Promise.all is returning an array of undefined and resolves before being done
  29. Weird behavior with Promise throwing “Unhandled promise rejection” error
  30. Promise.resolve().then vs setImmediate vs nextTick

Leave a Comment