[Javascript] fetch 사용법 비동기식 프로그래밍 이해하기

 

 

Javascript 비동기 프로그래밍

 

Javascript의 대표적인 비동기 요청은 네트워크(서버)에 자원을 요청하는 작업이다. 네트워크에 자원을 요청하는 방식은 여러가지가 있지만 대표적인 방법이 URL를 사용하는 경우다.

 

URL을 사용해서 서버에 자원을 요청하는 경우 Javascript의 fetch 메소드를 사용한다. 특정 정보만 동적으로 변경하기 위해 서버에 요청하게 되고, 전달받은 값을 웹 브라우저에 표현해 줄 수 있다. 이 과정이 비동기적으로 돌아간다.

 

 

fetch 결과값 합치기

 

서버에 여러개의 fetch() 메소드를 사용해서 자원을 받아온 값을 합쳐야 하는 경우가 있다. fetch() 메소드를 어떻게 중첩으로 호출한 후 결과값을 합치게 될까?

 

 

중첩 fetch() 메소드 사용

return 값으로 fetch() 함수를 호출한 결값을 반환한다. fetch() 함수 내에서는 Promise를 전달받아 json()을 사용해 Promise의 값을 변경해주고, 반환할 객체의 적당한 키 값에 데이터를 추가해준다.

 

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

function getNewsAndWeatherFunc() {

    let final = {};

    return fetch(newsURL)
        .then(res=>res.json())
        .then((result) => {
          final.news = result.data;
          return fetch(weatherURL)
        })    
        .then(res => res.json())
        .then(result => {
          final.weather = result;
          return final
        })
}

 

Promise.all() 사용

Promise.all() 메소드를 사용해서 fetch() 결과값을 배열로 합쳐주고 한번에 반환할 수 있다. Promise.all()의 결과값인 values는 모두  fulfilled 된 Promise 객체들의 값을 모은 배열이 된다. 

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

function getNewsAndWeatherAll() {
    const obj = {};

    const a = fetch(newsURL).then(res=>res.json()).then((result)=>result.data)
    const b = fetch(weatherURL).then(res=>res.json())

    return Promise.all([a,b])
            .then((values)=>{
              obj.news = values[0];
              obj.weather = values[1];
              return obj;
            })
}

 

 

async / await 메소드 사용

fetch() 결과값을 받기 위해 async / await 명령어를 사용할 수 있다. async / await를 사용하면 동기식 프로그래밍 처럼 코드를 구성할 수 있지만 사실 작동은 비동기 식으로 작동하게 된다.

async function getNewsAndWeatherAsync() {

    const obj = {};
    const a =await fetch(newsURL).then(res=>res.json()).then((result)=>result.data)
    obj.news = a;
    const b =await fetch(weatherURL).then(res=>res.json())
    obj.weather = b;

    return obj;


}

 

 

 

[Javascript] Promise란 무엇인가? ( async await 사용 방법)

 

[Javascript] async await 사용방법