[Javascript] 콜백(callback), 프로미스(Promise)란?

콜백이란?

다른 함수가 실행을 마친 뒤, 그 다음에 실행하는 함수

javascript에서 함수는 object(객체)이므로, 다른 함수의 인자나, 함수의 반환값으로 사용할 수 있다.

 

콜백함수란?

다른 함수의 인자로 사용되는 함수

다른 함수의 반환값으로 사용되는 함수

 

Javascript에서 콜백함수가 중요한 이유

javascript는 기본적으로 비동기적 방식을 사용하기 때문에,

작업이 순차적으로 실행되어야 하는 경우

함수가 원치않는 순서로 실행되어 결과가 뒤바뀔 수 있다.

함수는 기본적으로 동기 방식을 사용하므로, 이를 콜백형태로 사용해 동기방식으로 프로그래밍 할 수 있다.

 

콜백함수 만들기 예제

// 일반적인 함수

function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}

doHomework('math');

// Alerts: Starting my math homework.

// 콜백함수 사용 예제

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

doHomework('math', () => {
  alert('Finished my homework.');
});

// Alerts: Starting my math homework.
// Alerts: Finished my homework.

// 콜백함수 사용 예제 2

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

function alertFinished(){
  alert('Finished my homework.');
}

doHomework('math', alertFinished);

// Alerts: Starting my math homework.
// Alerts: Finished my homework.

 

---

Promise란?

생성된 시점에는 정해지지 않은 값의 대리자 역할을 해주는 객체.

비동기 연산이 종료된 이후에, 결과 값과 실패 사유를 처리하기 위해 사용한다!

현재 시점에서는 결과를 반환하지 않고, 미래에 결과를 제공하겠다는 '약속'(프로미스)을 반환한다

// 비동기 작업에서 성공과 실패를 분리해서 성공 실패 여부에 따라, 서로 다른 객체를 돌려준다.

// 기존의 문제점

try {
  setTimeout(() => { throw 'Error!'; }, 1000);
} catch (e) {
  // setTimeout 함수는 일정 시간이 지난 이후로 실행되므로 (비동기)
  // try를 벗어난 이후에 에러가 발생한다! - 결국 try catch로 에러를 잡아낼 수 없음
  console.log(e);
}

 

Promise 작동방식

Promise 성공시 resolver 호출

Promise 실패시 reject 호출

 

Promise 사용법

Promise는 기본적으로 3가지 상태를 반환하는데,

상태마다 다른 기능을 수행하도록 만들어져 있다.

1. pending -> () => {resolve} -> funfilled

pending : 
    Promise를 수행중이므로, 함수가 끝날때까지 기다린다.

fulfilled :
    Promise가 성공적으로 끝났고, resolve 를 반환한다.

2. pending -> () => {reject} -> rejected

rejected :
    Promise에서 에러가 발생했고, 에러를 반환한다.


* settled : 
    fulfilled 혹은 reject로 결론이 난 상태

// 함수만들기
var promise1 = function(bool){
  // 새로운 프로미스 생성
  // 콜백함수에 resolve, reject 인자로 줌, ( resolve => then, reject => catch 연결 )
  return new Promise(function(resolve, reject){
    setTimeout( function(){
      // bool 값에 따라 출력다르게 하기
      if(bool){
        resolve("fulfilled 상태입니다. then으로 연결됩니다.");
      } else {
        reject("rejected 상태입니다. catch으로 연결됩니다.");
      }
    }, 1000)
  })
}

// 함수에 true인자로 주어 호출
// true는 resolve와 연결했으므로, .then으로 연결
promise1(true)
.then( function(result){
  console.log(result);
})
.catch( function(err){
  console.log(err)
})

 

 

 

Pending( 대기 상태 )

// Pending(대기) 상태로 전환

new Promise();

// Pending(대기) 상태로 전환하고, 콜백함수 만들기

new Promise(function(resolve, reject){
  //...
});

 

Fulfilled( 수행 )

// Promise안에서 resolve 실행시, Fulfilled 상태가 된다

function getData() {
  return new Promise(function(resolve, reject){
    var data = 100;
    
    // resolve가 실행되었으므로, Fulfilled 상태로 전환, then() 으로 'data'를 전달한다.
    resolve(data);
  });
}

// resolve에서 받은 'data'를, then()을 사용해 받아온다

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

 

Rejected( 실패 )

// Promise안에서 reject 실행시, reject 상태가 된다

function getData() {
  return new Promise(function(resolve, reject){
    
    // reject가 실행되었으므로, reject 상태로 전환, catch() 으로 'data'를 전달한다.
    reject(new Error("Request is failed"));
  });
}

// reject에서 받은 에러메시지를, catch()을 사용해 받아온다

getData().then().catch(function(err) {
  console.log(err);  // Error: Request is failed
});

 

---

 

Promise.all()

함수 배열을 모두 실행하고, ( 병렬 실행)

모든 함수실행에 관한, 하나의 Promise객체를 반환한다.

new Promise.all([ func1, func2, func3, ... ])
  .then()
  .catch()