TIL] JavaSript-동기/비동기, promise

🌼 Promise

promise는 JavaScript에서 비동기 처리를 위해 사용하는 객체이다. 프로미스를 사용하면 비동기 프로그래밍을 동기 프로그래밍 방식으로 처리할 수 있다.

promise: promise는 아래와 같은 3가지 상태를 갖는다. promise 객체에는 executor라는 callback 함수를 전달해주어야 하며, 이 함수는 resolve, reject 되었을 때 실행될 callback 함수를 인자로 받는다.

• 대기(pending): 이행하거나 거부되지 않은 초기 상태.
  • 이행(fulfilled): 연산이 성공적으로 완료됨.
  • 거부(rejected): 연산이 실패함.

 // 1.Producer
const promise = new Promise((resolve, reject) => {
  //doing something heavy work (network,read files...)
  console.log('doing something');
  setTimeout(() => {
    // resolve('ellie);
    reject(new Error('no network'));
  }, 2000);
});
  
/* 2. Consumer: then, catch, finally
then은 promise 객체가 resolve된 결과 값을 다룰 때 사용한다.
catch는 promise 객체가 reject된 결과 값을 다룰 때 사용한다.
성공, 실패와 상관없이 무조건 마지막에 실행되는 값을 다를 때 사용한다. */ 

promise
  .then(value => {
    console.log(value);
})
  .catch(error => {
    console.log(error);
});  
  .finally(value => {
    console.log('finally');
});    
  

🌼 promise 객체의 활용(fetch)

서버와 통신할 때 사용하는 fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체(method: POST, GET, DELETE...)를 받은 뒤 통신의 결과로 Promise 타입의 객체를 반환한다.

/* fetch 함수는 서버로부터 데이터를 주고 받을 때 사용하는 함수이다.
method로 GET을 사용할 경우, 생략이 가능하다. */

function logName() {
  fetch('http://example.com/movies.json', {
    method: "GET"
  })
  .then(res => res.json())
  .then(data => console.log(data));
}

출처-YOUTUBE(드림코딩)