2021_04_27
TIL - fetch를 이용해 웹에서 정보 가져오기
1. fetch를 이용해 웹에서 정보 가져오기
Fetch API를 MDN 문서에서 찾아보면 '리소스를 가져 오기위한 인터페이스를 제공하는 것' 이라고 소개되어있다. 쉽게 말하면 서버에 URL로 네트워크를 요청할 때 사용한다.
fetch API 사용하는 방법
먼저 fetch API는 아래와 같은 구조를 가지고있다.
fetch(url) .then((response) => { // Code ... }) .catch(function(error) { // Error });
1) 통신을 성공했을 때
fetch(url) .then(response => response.json()) .catch(function(error) { // Error });
통신을 성공했을 땐 .then() 안의 코드를 실행한다.
response.json()을 해서 응답을 JSON 형태로 변환시켜서 다음 Promise로 전달하는 역할을 한다.
2) 통신을 실패했을 때
fetch(url) .then((response) => { // Code ... }) .catch(function(error) { console.log(error) });
통신에 실패했을 땐 .catch() 안의 코드를 실행한다.
error를 출력하여 에러의 원인을 알 수 있다.
예제로 확인하기!
문제) newsURL, weatherURL의 요청의 결과를 하나의 객체로 합쳐야 한다.
해결방법)
-- fetch API를 이용해서 데이터를 가져온다.
-- 가져온 데이터를 json 형태로 변환한다.
-- 새로운 객체에 넣는다.
var newsURL = 'http://localhost:5000/data/latestNews'; var weatherURL = 'http://localhost:5000/data/weather'; function getNewsAndWeather() { let obj = {}; //리턴할 새로운 객체를 선언한다. return fetch(newsURL) //fetch API를 사용한다. .then(response => response.json()) //받아온 응답을 JSON 형태로 변환한다. .then(news => { return fetch(weatherURL) //fetch API를 사용한다. .then(response => response.json()) //받아온 응답을 JSON 형태로 변환한다. .then((weather) => { obj['news'] = news.data //객체의 키를 'news'로 해서 데이터를 넣는다. obj['weather'] = weather //객체의 키를 'weather'로 해서 데이터를 넣는다. return obj }) }) }
오늘은 fetch API에 대하여 공부하였다.
내일은 클라이언트 서버, Ajax에 대하여 공부한다
오늘은 여기까지 ~ :)
Author And Source
이 문제에 관하여(2021_04_27), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jiwon22/20210427저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)