fetch API

Fetch API란??

Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공한다.

API가 제공하는 전역 메소드인 fetch()로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수도 있다.

웹 사이트에는 시시각각 변하는 정보와 늘 고정적인 정보가 따로 분리되어 나타나있다. 대표적인 동적 데이터는 최신뉴스, 날씨/미세먼지 등과 같은 것들이 있다.

이럴 때 많은 웹사이트들은 해당 정보만 업데이트하기 위해서 Fetch API를 사용한다.

사용법

fetch('http://example.com/movies.json') 
  .then((response) => response.json())
  .then((data) => console.log(data));

1. fetch()메소드는 가져오고자 하는 리소스의 경로를 파라미터로 받는다.
2. 첫번째 then 메소드가 인자로 받는 값은 Reponse객체를 받는다.
   이 Reponse객체는 JSON 본문 컨텐츠 뿐만 아니라 HTTP응답 전체를 나타내고 있기 때문에 전달값을 그대로 사용할 수가 없다. 이를 해결하기 위해서 .json()메소드를 사용해 JSON 본문 컨텐츠만을 추출한다.
   그러면 그 다음 then 메소드의 인자로 를 넘겨주게 된다.
3. 그렇게 json()메소드를 통해서 다음 then 메소드의 인자는 Promise가 된다.

Fetch API의 비동기적 용법 세 가지

1. basic chaning

우선은 가장 기본적인 여러개의 Promise를 then으로 이어서 사용하는 방법이다. 코드가 짧다면 상관 없지만 then 메소드가 많아질수록 코드가 길어지고 복잡해진다.

// 리소스를 얻을 네트워크 경로를 설정
const url1 = "~"
const url2 = "~"

let result = {} // 최종 데이터를 담을 객체
function getData () {
  return fetch(url1); // 해당경로의 정보를 response 객체 형태로 가져오고 then 메서드의 인자로 전달.
    .then((response)=> response.json()) // reponse를 Promise로 변환하고 다음 then 메서드의 인자로 전달.
    .then((json)=> {
    	result.data1 = json 
    	return fetch(url2); 
  	})
    .then((response)=> response.json()) 
    .then((json)=> {
  		result.data2 = json
    	return result;
  	})
}

2. Promise.all()

두 번째 방법은 여러개의 비동기 작업을 한번에 처리할 수 있게 해주는 Promise.all()을 사용하는 것이다.

실제로 한번에 수백, 수천개의 비동기 작업을 해야하는 경우가 발생하는데 이때 사용하기 가장 적절한 방법이다.

const url1 = "~"
const url2 = "~"

function getData() {
  return Promise.all([fetch(url1),fetch(url2)]) // [Response,Response]를 then메소드의 인자로 전달.
    .then((value)=>{
    	const arr = value.map(e=> e.json) // arr = [Promise,Promise]
        return Promise.all(arr) // 다음 then 메소드의 인자로 Promise.all(arr)를 전달.
  	})
    .then(([data1,data2])=> {news:data1,weather:data2})
}

3. Async/Await

const url1 = "~"
const url2 = "~"

const urlFetch = (url) => {
	fetch(url)
      .then((reponse)=> reponse.json)
      .then((value)=> value)
}
async function getData() {
	const data1 = await urlFetch(url1)
	const data2 = await urlFetch(url2)
    return {data:data1,weather:data2}
}