var url = 'https://api.spacexdata.com/v2/launches/latest'; var result = fetch(url, { method: 'get', }).then(function(response) { return response.json(); // pass the data as promise to next then block }).then(function(data) { var rocketId = data.rocket.rocket_id; console.log(rocketId, '\n'); return fetch('https://api.spacexdata.com/v2/rockets/' + rocketId); // make a 2nd request and return a promise }) .then(function(response) { return response.json(); }) .catch(function(error) { console.log('Request failed', error) }) // I'm using the result variable to show that you can continue to extend the chain from the returned promise result.then(function(r) { console.log(r); // 2nd request result });
fetch를 이렇게 중첩해서 사용하는 게 가능하다. (chain multiple promises) 눈여겨볼 부분은 return에 함수를 실행시켰다는 점이다. 결국 해당 함수의 return 값이 최종 return 값이 되고 동시에 .then
, .catch
의 인자값이 된다. return으로 값을 받고 .then
안에서 해당 값을 이용하는 fetch를 실행시켜도 되지만, 어차피 에러가 나면 .catch
로 빠지기 때문에 return에서 바로 호출하는 편이 더 간결한 것 같다.