코드스테이츠 소프트웨어엔지지어링 부트캠프 +55

promise 객체 스프린트를 복습했다.

비동기화

동기 시스템인 JS속에서 비동기 영역을 만든다. 비동기 영역 안에서도 callback, promise, async/await 을 이용하여 동기화 할 수 있다.

Promise

new Promise()의 인자로 callback이 들어간다. callback은 resolve, reject가 있는데, resolve()가 실행되면 Promise객체의 상태는 fulfiled가 되고 reject()가 실행되면 Promise의 객체는 rejected 가 된다.

 

fulfiled 상태에서는 .then()으로 결과값을 받고 rejected 상태에서는 .catch()로 실패이유(실패처리 결과값)을 받는다.

.catch, .then은 promise를 리턴한다.

 

다음 표는 Promise의 3가지 상태를 표시한 것이다.

fulfilled	비동기 처리가 완료되어 Promise가 결과를 반환해준 상태 then()을 이용하여 처리 결과 값을 받을 수 있다.
rejected	실패, 실패 처리 결과값(실패이유)를 catch()로 받을 수 있다.
pending	fuifilled나 rejected가 되기 전의 대기상태.

//Pending상태

new Promise() // Pending

-------------------------------------------------
//Fulfilled상태

function getData() {
  return new Promise(function(resolve, reject) {
    var data = 100;
    resolve(data);
  });
}

getData().then(function(resolvedData) {
  console.log(resolvedData); // 100
});

------------------------------------------------------
//Rejected 상태

function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) {
  console.log(err); // Error: Request is failed
});

 

 

 

async & await

여러개의 비동기 처리 코드를 다룰 때 좋다.

 

1. 함수 앞에 async 라는 예약어를 붙힌다.

2. 함수의 내부 로직 중 비동기 처리 코드 앞에 await을 붙힌다. 이때 await이 붙은 코드는 꼭 Promise 객체를 반환해야 한다.

   - 일반적으로 await의 대상이 되는 비동기 처리 코드는 Promise를 반환하는 API 호출 함수이다.

   - await문의 Promise가 fulfill되거나 reject 될 때 까지 async 함수의 실행을 일시정지 한 후, await의 Promise의 상태가 fulfill되면         일시정지한 부분 이후부터 async 함수를 다시 실행한다.

 

다음은 url을 통해 정보를 얻어 온 후 비동기 처리를 하였다.

 

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

async function getNewsAndWeatherAsync() {
 
  const newsData = await fetch(newsURL).then(res=>res.json())
  const weatherData = await fetch(weatherURL).then(res=>res.json())

  return {news:newsData.data,weather:weatherData}
}