콜백 함수/promise

1. 일반함수

function findId(id) {
  const admin = {
    id: id,
    name: "Admin" + id,
  };
  return admin;
}

const ADMIN = findId(1);
console.log("ADMIN:", ADMIN);

findId함수가 호출되면 admin 변수에 id, name값이 세팅되고, 세팅된 값을 ADMIN 넣는다. 

마지막에 console.log를 실행하면 아래와 같은 값이 출력된다.

ADMIN: {id: 1, name: "Admin1"}

 

2. 콜백함수

function findAdmin(id, callback) {
  const admin = {
    id: id,
    name: "Admin" + id
  };
  callback(admin);
}

findAdmin(1, function(admin) {
  console.log("ADMIN:", admin);
});

findAdmin함수가 호출되면 1과 함수가 파라미터로 넘어간다. 

여기서 파라미터로 넘어간 함수는 

function(admin) { 
  console.log("ADMIN:", admin); 
}

findAdmin함수가 실행되면서 id파라미터로는 admin변수에 id, name을 세팅하고, 

파라미터로 넘어간 함수는 callback이라는 이름으로 admin변수를 파라미터로 실행된다. 

이때 findAdmin함수안에 정의되여있는 함수가 실행되면서 console 로그를 찍는다.

ADMIN: {id: 1, name: "Admin1"}

결론적으로 A라는 함수를 호출하는데
A함수를 실행한 다음 실행될 B라는 함수를 
A함수의 파라미터에 정의해서 넘긴다.

이렇게 사용하는 이유는 A함수를 실행하고 B함수를 실행하고 싶은데
A, B함수를 코드에 나란히 두고 실행하면 비동기적으로 각각 실행된다. 
그래서 A함수의 결과가 나오기전에 B함수가 실행될 수 있기 때문이다. 

 

 

콜백함수를 좀 더 깔금하게 구현하는 방법 promise

 

3. promise란 무엇인가?

자바스크립트 비동기 처리에 사용되는 객체 : 나중에 완료될 것으로 기대되는 연산을 표현한다.

프로미스는 상태(states)라는 개념이 있다.

여기서 말하는 상태란 프로미스의 처리 과정을 의미한다. 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다..

Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

 

프로미스 상태

 

콜백함수와 비교해서 promise가 갖는 장점은 Error 예외처리와 간결한 코드를 구현할 수 있다는 것이다.

 

promise 예제

axios.post('/api/message?type=email&roll=basic', {
  is_Email : useremail,
  is_Subject : subject,
  is_Text: text
})
.then( response => {
  alert('이메일 발송완료')
})
.catch( error => {alert(error); return false;});

axios를 이용해 이메일발송 Api를 호출하는 부분이다.

이메일 발송함수가 정상적으로 실행된다면 .then()이 실패한다면 .catch()함수가 실행된다.

 

resolve()와 reject()를 사용해서 처리하는 방법도 있는데 개인적으로 이 두 함수는 사용하지 않아도 충분한 것 같다.

 

기타

 

done() : ajax가 성공일때 콜백함수 호출

then() : ajax가 성공일때와 실패일때 호출할 콜백함수를 지정할 수 있다. catch()를 사용하지 않고도

아래 코드와 같이 ....then(성공했을때함수(), 실패했을때함수() ) 형태로 사용가능 하다. 

getData().then(function (result) {
  console.log(result);
  throw new Error("Error in then()"); // Uncaught (in promise) Error: Error in then()
}, function (err) {
  console.log('then error : ', err);
});

 

아래와 같이 then을 여러개 사용할 수 있다.

new Promise(function(resolve, reject){
  setTimeout(function() {
    resolve(1);
  }, 2000);
})
.then(function(result) {
  console.log(result); // 1
  return result + 10;
})
.then(function(result) {
  console.log(result); // 11
  return result + 20;
})
.then(function(result) {
  console.log(result); // 31
});

참고 https://joshua1988.github.io/web-development/javascript/promise-for-beginners/