Question

144

using a fetch inside another fetch in javascript

rated 0 times [ 148] [ 4] / answers: 1 / hits: 82280 / 8 Years ago, mon, december 5, 2016, 12:00:00

I want to get an api and after that call another one. Is it wisely using a code like this in javascript?

fetch(url, {

 method: 'get',

 }).then(function(response) {  

  response.json().then(function(data) {  

    fetch(anotherUrl).then(function(response) {

      return response.json();

    }).catch(function() {

      console.log(Booo);

    });

  });  

}) 

.catch(function(error) {  

  console.log('Request failed', error)  

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bryantc

Add To Favorites

Follow

Total Points: 455

Total Questions: 96

Total Answers: 110

Location: San Marino

Member since Thu, Jun 30, 2022

2 Years ago

bryantc questions

1 How to fix TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')

Tue, Dec 7, 21, 00:00, 3 Years ago

1 NextJS / vercel - 504 Error 'FUNCTION_INVOCATION_TIMEOUT'

Fri, Aug 13, 21, 00:00, 3 Years ago

1 using react router with next.js

Tue, Mar 30, 21, 00:00, 3 Years ago

1 Notification system using socket.io

Fri, Jun 5, 20, 00:00, 4 Years ago

1 prisma2: how to fetch nested fields?

Wed, May 27, 20, 00:00, 4 Years ago

View All

answered 8 Years ago marcos · Accepted Answer

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