[코드스테이츠 과제] fetch API

코드스테이츠 과제 코드를 공부 목적으로 변형 해서 정리 하였습니다.

🍀01_basicChaining

---

조건

• 체이닝의 결과는 Promise 형태로 리턴 되어야합니다
• /data/latest 의 응답 내용과 /data/weather 응답 내용을 합쳐 새로운 객체로 리턴되어야 합니다
• fetch를 활용하세요. 총 두 번 사용해야 합니다
• Promise.all 또는 async/await을 사용하지 않고 풀어보세요

const newsURL = 'newsUrl로 data배열 안에 객체들이 있다';
const weatherURL = 'weatherURL로 바로 객체 들이 있다';

function 01_basicChaining() {
    const obj = {}	//두 응답 내용을 합쳐 객체로 반환할 빈 객체를 만들었습니다.
    return fetch(newsURL)	
        .then((response) => response.json())
        .then((json) => {
            obj.news = json.data;
            return fetch(weatherURL)
        })
        .then((response) => response.json())
        .then((json) => {
            obj.weather = json;
            return obj
        })
}

 

🍀02_promiseAll

---

조건

• Promise 형태로 리턴되어야 합니다
• Promise.all을 사용해서 풀어야 합니다
• /data/latest 의 응답 내용과 /data/weather 응답 내용을 합쳐 새로운 객체로 리턴되어야 합니다

function 02_promiseAll() {
  const obj = {}
  return Promise.all([fetch(newsURL).then((response) => response.json()),
    fetch(weatherURL).then((response) => response.json())])
      .then(([data1,data2])=>{
        obj.news = data1.data;
        obj.weather = data2;
        return obj
      })
}

 

🍀03_asyncAwait

---

조건

• async 키워드를 사용한 함수는 AsyncFunction의 인스턴스입니다
• /data/latest 의 응답 내용과 /data/weather 응답 내용을 합쳐 새로운 객체로 리턴되어야 합니다
• async/await을 활용하세요. 총 두 번 사용해야 합니다

async function 03_asyncAwait() {
  const data1 = await fetch(newsURL).then((response) => response.json())
  const data2 = await fetch(weatherURL).then((response) => response.json())
  const obj = {}
  obj.news = data1.data;
  obj.weather = data2;
  return obj
}