Fetch 21.04.27


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)
    }
}





© 2020.11. by creamer

Powered by CREAMer