Fetch API & Async await

Fetch API

특정 사이트에 resource 요청 및 응답을 받기 위한 함수.

과거 client에서 직접 http를 요청하고 응답을 받는데 상당히 복잡해서 request, axios, jQuery 와 같은 library를 이용. 하지만 기술이 발전하면서, 브라우저에 자체 내장된 본 함수를 이용할 수 있게 되었음.

fetch(url, options) // url은 string type임. 
.then(res => console.log(성공!)
.catch(err => console.log(에러발생!)

Promise 타입 객체를 반환. API이 성공했을 경우, 응답 객체를 resolve하고 실패했을 경우 error 객체를 reject 함.

options에는 HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정해 줄 수 있음.

async await

Javascript 비동기 처리 패턴 중 가장 최근에 나온 문법. 가독성이 높아짐.
함수의 앞에 async를 붙여주고, promise 객체를 반환하는 API 호출함수 (ex. axios) 앞에 await을 붙여주자. 기재 순서에 따라 비동기 처리 순서가 결정된다.

async function 함수명() {
  await 비동기_처리_메서드_명();
}

실전예제

각 사이트에서 fetch 함수를 통해 데이터를 가져오고, 응답 내용을 합쳐 새로운 객체 형태로 리턴하자. 새로운 객체 형태는 하기와 같다.

{news: [newsURL의 데이터], weather: {weatherURL의 데이터}}  

먼저, Fetch 함수에 쓸 수 있는 url 정보를 받아오자.

var newsURL = 'http://localhost:5000/data/latestNews';
var weatherURL = 'http://localhost:5000/data/weather';

그리고 비동기 처리 함수 앞에 async를 붙여주자.

async function getNewsAndWeatherAsync() {}

함수 안에 Fetch를 이용해서 각 url에서 원하는 data를 가져오자. 그리고 비동기 처리를 위해 await을 붙여주자.

await fetch(newsURL)
await fetch(weatherURL)

fetch 함수로 받은 데이터는 바로 사용할 수 없고, 가공이 필요하다! 그건 바로 json()

json()은 fetch를 통해 받은 자료(response) stream을 가져와 완료될 때 까지 읽고, 다 읽은 body의 텍스트를 promise 형태로 바꿔준다. axios는 이러한 가공 단계가 내장되어있어 본 process를 생략한다.

await fetch(newsURL).then(a => a.json())
await fetch(weatherURL).then(b => b.json())

이제, 가공할 준비가 끝났다. 문제에서 요구한 데이터 형태로 바꿔보자.

async function getNewsAndWeatherAsync() {
  let obj = {};
  await fetch(newsURL).then(a => a.json()).then(a => obj["news"]= a.data)
  await fetch(weatherURL).then(b => b.json()).then(b => obj["weather"] = b)
  return obj;
}  

JSON 관련 method

• fetch API
  response.body.json() -> response 속 body의 JSON을 해석해주는 method.

• JSON
  JSON.stringify() -> 서버로 data를 보내기 위해서 JSON으로 변경.
  JSON.parse() -> 서버로 부터 받은 data를 해석하여 JS에서 쓸 수 있도록 함.