[JS] Fetch API 의사코드 작성해보기

1. fetch() 함수란?

원격 API를 간단하게 호출할 수 있도록 브라우저에서 제공하는 함수이다.

첫번째 인자로 URL, 두번째인자로는 옵션 객체를 받고, Promise 타입의 객체를 반환한다.

반환된 객체는 API 호출이 성공하면 response를 resolve하고, 실패한 경우 reject를 한다.

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

 

2. basicChaining.js

Todo: fetch를 사용해 작성한다. 여러개의 promise를 then으로 연결하여 작성한다.

//뉴스와 날씨 데이터를 가져오는 함수

1. newsURL을 첫번째 인자로 넣어서 GET 요청을 한다.
2. res가 성공한 경우 json형식으로 파싱한다.
   이때 반환된 res.json()은 promise를 반환하므로 다음번에 then으로 사용할 수 있다.
3. weatherURL을 첫번째 인자로 넣어서 날씨데이터를 가져온다.
4. 다시 json 형식으로 파싱한다.
5. then 블록에서 변환된 날씨 데이터와 뉴스 데이터 객체를 생성하고 반환한다.

 

3. promiseAll.js

Todo: Promise.all을 사용해 작성한다.

1. Promise.all()로 두개의 HTTP GET 요청을 보낸다.
2. then()으로 두개의 응답객체를 각각 처리한다.
3. 응답 객체를 json 형식으로 파싱한다.
4. Promise.all()을 다시 써서 json 데이터를 병렬로 처리한다.
5. 뉴스와 날씨 데이터를 담은 객체를 반환한다.

 

4. asyncAwait.js

Todo: async/await 키워드 사용해 작성한다.

1. fetch()를 호출해서 뉴스 데이터에 GET 요청을 보낸다.
2. 비동기 작업이 완료될 때까지 대기하고, 응답 데이터를 json으로 파싱한다.
3. fetch()를 다시 호출해서 날씨 데이터에 GET 요청을 보낸다.
4. json으로 파싱한다.
5. 뉴스 데이터와 날씨 데이터를 담은 객체를 반환한다.