Fetch 21.04.27
in Dev on Java Script
Fetch API
특정 URL로부터 정보를 받아오는 역할. 이 과정이 비동기로 실행.
fetch()는 promise 객체를 return
syntax
// fetch()는 promise 객체를 return
let 프로미스 객체 = fetch(API URL 주소, [옵션])
// 옵션에는 method나 header 등을 지정 가능
// 옵션이 비어있다면, GET method가 default 값이므로 API URL 주소로부터 컨텐츠를 다운로드
fetch API 사용법
// 최신 뉴스: https://v1.nocodeapi.com/codestates/google_sheets/YbFMAAgOPgIwEXUU?tabId=최신뉴스
// 날씨 정보: https://v1.nocodeapi.com/codestates/google_sheets/YbFMAAgOPgIwEXUU?tabId=날씨&row_id=2
// 받아 올 API를
let url = 'https://v1.nocodeapi.com/codestates/google_sheets/YbFMAAgOPgIwEXUU?tabId=최신뉴스'
// url을 받아와서 프로미스 객체로 반환한다.
fetch (url)
// fetch API는 자체적으로 json() 메소드가 있다.
// fetch로 받은 promise 객체의 응답(response)을 JSON 형태로 변환
.then(resp => resp.json())
// json() 화에도 시간이 걸리므로?
// then을 한번 더 써서 console에 json화 한 데이터 출력
.then(json => console.log(json))
// 에러 발생시 콘솔에 에러 표시
.catch(err => console.log(err));
// fetch API는 Promise 형식으로 이루어져 있다.
// Promise {<pending>}
// {data: Array(3), total: 3}
fetch x Async & Await : ex code
// API URL을 변수에 담아준다.
let newsURL = 'http://localhost:5000/data/latestNews';
let weatherURL = 'http://localhost:5000/data/weather';
// async 함수 선언
async function getData() {
// try & catch 문 사용.
try {
// await을 사용하는 이유 : API 데이터를 fetch 하는데 시간이 걸리기 때문
// fetch는 promise 객체를 반환하며, 문자열 형식으로 데이터 반환.
let news = await fetch(newsURL);
// fetch한 데이터를 json()을 통해 객체화
// json()화에도 시간이 걸리므로 await 사용
let newsData = await news.json()
// newsData 객체 안에 있는 data만 출력.
console.log(newsData.data)
let weather = await fetch(weatherURL);
let weatherData = await weather.json();
console.log(weatherData);
} catch(err) {
console.log(err)
}
}