비동기적 프로그래밍

비동기적 프로그래밍이 필요한 이유

자바스크립트는 싱글 스레드 Single Thread이다.

싱글 스레드일때는 멀디 스레드처럼 여러가지 일을 신경쓰지 않아도 되지만,

특정 코드의 연산이 끝날때까지 기다렸다가 다음 코드를 진행할 수 있다는 문제점을 가지고 있다.

비동기적 프로그래밍을 하면 이 문제를 해결 할 수 있다.

console.log("A");

setTimeout(function() {
	console.log("B");
}, 3000); // 1000ms = 1 sec, 따라서 3초후

console.log("C");

이 코드를 실행해 보면, A를 찍은 후 3초를 기다려서 B를 찍는것이 아니라

A -> C -> B의 순서로 콘솔에 찍히는걸 확인해 볼 수 있다.

프로미스의 개본 개념
프로미스 기반 비동기적 함수를 호출하면 그 함수는 Promise 인스턴스를 반환하고
프로미스는 성공(fullfilled)하거나, 실패(rejected)하거나 단 두가지 뿐.
성공이든 실패든 단 한번만 일어나는 것을 결정됐다(settled)라고 한다.

/*
* 기본형태
* new Promise(function(resolve, reject) { ... });
*/

const condition = true; // condition이 true이면 resolve, fasle면 reject
const condition = new Promise((resolve, reject) => {
    if (condition) {
        resolve('성공');
    } else {
        reject('실패');
    }
});

promise
.then((message) => {
    console.log(message); // 성공(resolve)한 경우 실행
});
.catch((error) => {
    console.error(error); // 실패(reject)한 경우 실행
});

프로미스를 이해하기 위해 다음과 같은 예시를 들어보겠다.

엄마가 약속(promise)하시길,

"이번 시험에 올 1등급 받아온다면 휴대폰 사줄게"

이 약속(promise)에는 세가지 상태가 있다.

1. Pending : 내가 휴대폰을 가질 수 있을지 모르는 상태
2. Fulfilled : 올 1등급을 받음. 엄마가 휴대폰을 사줌
3. Rejected: 올 1등급 실패. 엄마가 새 휴대폰 안 사주심

약속하기

위 내용을 코드로 옮긴다면

// Promise
var willGetNewPhone = new Promise(
    function(resolve, reject) {
        if (isHighScore) {
            var phone = {
                brand: 'Samsung',
                color: 'black'
            };
            resolve(phone);
        } else {
            var reason = new Error('You\'ve got low grade. Cannot have a cellphone');
            reject(reason); // reject
        }
    }
)


var askMom = function() {
       willGetNewPhone
        .then(function(fulfilled) { // then 메서드 안에 콜백함수
            // 올 1등급 달성. 휴대폰을 갖게 됐습니다.
                console.log(fulfilled);
            // output: { brand: 'Samsung', color: 'black''}
        })
        .catch(function(error) {
            // 올 1등급 실패. 휴대폰 없음
            console.log(error);
            // output: 'You've got low grade. Cannot have a cellphone'
        });
}


askMom();

프로미스(Promise) 기반으로 재구성되면서 악명 높은 콜백 헬(callback hell)을 극복.

참고 :

youtu.be/m0icCqHY39U

https://scotch.io/tutorials/javascript-promises-for-dummies#toc-understanding-promises