오늘 진행했던, fetch를 이용하여 HTTP 요청을 보내고,
응답을 받는 연습을 정리해볼겸 포스팅하려고 한다.
fetch에 대해서는 제대로된 정리글을 다시 포스팅할 것이기 때문에
문제 위주로 적으려고 합니다.
먼저, 간단하게 fetch가 뭐야...??
fetch API 는 Promise 기반으로 구성된
비동기 처리 프로그래밍에 잘 맞는 형태인 기능이다.
그래서, then이나 catch와 같은 체이닝으로 작성할 수 있는 장점이 있다.
또한, JS 기본기능이기 때문에 CDN과 같은
다른 작업 없이도 바로 사용할 수 있다.
기본 문법을 보면,
fetch("여기에 URL 입력")
.then(response=>response.text())
.then((text)=>{
요청 끝나고 할일
})위의 문법으로 아래처럼 예를 들어보면,
fetch("http://jsonplaceholder.typicode.com/posts", option)
.then(res => res.text())
.then((text) => {
console.log(text);
})이런식으로 fetch()에 요청할 url을 입력하고,
해당 주소에 요청을 보낸 다음, 응답 객체(Promise object Response)를 받는다.
그러면 첫번째 then 에서 그 응답을 받고 res.text()메서드로 파싱한 text값을 리턴
그다음 then 에서는 리턴한 text를 받고 원하는 처리를 할 수 있따~~~ 이겁니다. 간단하게 :)
그럼 본론으로 돌아가 문제풀이를 정리해보자!!
1. Chaining Test
구현해야 하는 것들은
- 체이닝의 결과가 Promise 형태로 리턴되어야 함.
- /data/latestNews 의 응답 내용과, /data/weather 응답 내용을
합쳐서 새로운 객체로 리턴되어야 함. - fetch를 활용하고, 총 두번사용 해야함.
- Promise.all 또는 async/await 없이 풀어야함.
먼저, 새로운 객체로 리턴을 해야하기 때문에 빈 객체를 잡아주고,
fetch를 통해 데이터요청을 보낼 URL주소를 입력한다.
첫번째 then() 메서드를 통해 받아온 데이터를
res.json()을 통해 JSON형태로 파싱해준다.
그 파싱해준 응답을 두번째 then()의
newsdata에 넣어주고 빈 객체obj에 집어 넣는데!!
obj.news 를 통해 news라는 키를 주고
그 키에대한 값으로 newsdata.data를 넣어주는 것이다.
그리고 리턴으로 fetch를 꼭 해줘야 weather 데이터요청을 해서
받아온 데이터들로 아래의 then을 사용할 수 있는 것이다.
weather 도 news 와 같이 똑같이 동작하고 마지막 obj을 리턴해준다.
2. Promise.all Test
구현해야 하는 것들은
- Promise 형태로 리턴 되어야 한다.
- Promise.all을 사용해서 풀어야한다.
- /data/latestNews 의 응답 내용과 /data/weather 응답 내용을
합쳐서 새로운 객체로 리턴 되어야한다.
1번에서와 똑같이 데이터를 요청할 url을 적고,
받아온 데이터를 res에 담아서 JSON형태로 파싱해준다.
하지만 여기서 다른점은 파싱해준 데이터들을 각각 변수에 담아주었다.
여기서 중요한 점은 변수에 담긴 데이터들은 promise객체인걸 잊지말자!!
그러고나서, 데이터들을 담은 변수를 Promise.all을 통해
arr[0] 즉, news변수에 있는 데이터들을 obj에 news라는 키를 만들어
그 키의 값으로 넣어준다.
weather도 똑같이 obj에 weather라는 키를 만들어서
그 키의 값으로 넣어주고, obj를 리턴해준다!!
3. async/await Test
구현해야하는 것들은
- async 키워드를 사용한 함수는 AsyncFunction이다.
- /data/latestNews 의 응답 내용과 /data/weather 응답 내용을
합쳐서 새로운 객체로 리턴 되어야한다. - async/await을 총 두번 활용해야 한다.
getNewsAndWeatherAsync 함수에 async 키워드를 붙여서
비동기 함수라는 것을 인지시켜주고,
각 변수 a, b에 1,2번에서 했던거와 같이 데이터를 요청할 url 적고,
받아온 데이터를 res에 담아서 JSON형태로 파싱해준다.
파싱해준 데이터들을 각각 변수에 담아주었다.
그리고 중요한 비동기작업 함수 앞에는 await를 붙여서
promise가 작업이 끝날때까지 기다려야한다.
그리고 각 변수 a,b를 객체의 맞는 키에
값으러 넣어주고 리턴을 해주면 된다!!
