Promise

javascript engine

ex) Google V8(chrome, nodeJS)

• Memory Heap: 메모리 할당
• Call Stack: 코드 실행에 따라 호출 스택이 쌓임

runtime

• web API: 브라우저에서 제공하는 APIs
  ex) setTimeout
• Event Loop: Callback Event Queue에서 하나씩 꺼내 동작시키는 loop
• Callback Queue: Event 실행 관리하기 위해 사용되는 Queue

비동기 처리

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행

javascript 비동기 처리 이유

• 단일 스레드 : 한순간 하나의 작업만 처리 가능
• 여러가지 event 처리할 때 동기적으로 처리하면 하나의 event가 모두 처리될 때까지 다른 어떤 업무도 수행X

ajax

function getData() {
	var tableData;
	$.get('https://domain.com/products/1', function(response) {
		tableData = response;
	});
	return tableData;
}

console.log(getData()); // undefined

setTimeount()

// #1
console.log('Hello');

// #2
setTimeout(function() {
	console.log('Bye');
}, 3000);

// #3
console.log('Hello Again');     //1,3,2

// setTimeout(callback, ms);
// ms == 0 이면 바로 실행되지 않고 최소 ms 후에 실행됨 다음 event loop에 실행됨

setTimeout(function() {
    // (A)
    console.log('Second');
}, 0);
console.log('First');
// (B)

// First
// Second

promise

ES6의 비동기 처리를 위한 패턴

call back

function asyncFunction1(cb) {
  setTimeout(function() {
    console.log(1)
    cb()
  }, 1000)
}

function syncFunction1(cb) {
  console.log(1)
  cb()
}

function syncFunction2() {
  console.log(2)
}

asyncFunction1(function(asyncFunction1Result) {
  syncFunction1(function(syncFunction1Result) {
    syncFunction2()
  })
})
// 1 2 3

-> but call back hell 발생

function asyncFunction1(cb) {
  setTimeout(function() {
    console.log(1)
    cb()
  }, 100)
}

// 중략

function asyncFunction9(cb) {
  setTimeout(function() {
    console.log(9)
    cb()
  }, 100)
}

function asyncFunction10(cb) {
  setTimeout(function() {
    console.log(10)
  }, 100)
}

asyncFunction1(function(result) {
  asyncFunction2(function(result) {
    asyncFunction3(function(result) {
      asyncFunction4(function(result) {
        asyncFunction5(function(result) {
          asyncFunction6(function(result) {
            asyncFunction7(function(result) {
              asyncFunction8(function(result) {
                asyncFunction9(function(result) {
                  asyncFunction10()
                })
              })
            })
          })
        })
      })
    })
  })
})

// 1 2 3 4 5 6 7 8 9 10

생성

// Promise 객체의 생성
const promise = new Promise((resolve, reject) => {
  // 비동기 작업을 수행한다.

  if (/* 비동기 작업 수행 성공 */) {
    resolve('result');
  }
  else { /* 비동기 작업 수행 실패 */
    reject('failure reason');
  }
});

상태

• pending: 대기중
• fulfilled: 이행됨, 성공리에 완료
• rejected: 연산이 실패

후속 처리 메소드

• then: 첫 번째 콜백 함수는 성공 시 호출되고 두 번째 콜백 함수는 실패 시 호출

function get(url) {
    // Return a new promise.
    return new Promise(function(resolve, reject) {
        // Do the usual XHR stuff
        var req = new XMLHttpRequest();
        req.open('GET', url);
        req.onload = function() {
            // This is called even on 404 etc
            // so check the status
            if (req.status == 200) {
                // Resolve the promise with the response text
                resolve(req.response);
            } else {
                // Otherwise reject with the status text
                // which will hopefully be a meaningful error
                reject(Error(req.statusText));
            }
        }
        ;
    }
    );
}

get("https://jsonplaceholder.typicode.com/posts/1").then(resp=>console.log("resolve", resp), rej=>console.log("reject", rej), );

에러 처리 메소드

• catch: 예외 발생하면 호출

차이점

• then: 비동기 처리에서 발생한 에러(reject 함수가 호출 된 상태)만을 캐치
• catch: 비동기 에러 뿐 아니라 then 메소드 내부에서 발생한 에러

promise chain

후속 처리 메소드를 체이닝하여 여러개의 프로미스를 연결하여 사용

new Promise((resolve,reject)=>{
    console.log('Initial');
    resolve();
}
).then(()=>{
    throw new Error('Something failed');
    console.log('Do this');
}
).catch(()=>{
    console.log('Do that');
}
).then(()=>{
    console.log('Do this whatever happened before');
}
);
// Initial
// Do that
// Do this whatever happened before

정적 메소드

• Promise.resolve
  주어진 값으로 resolve하는 Promise를 생성

const resolvedPromise = Promise.resolve([1, 2, 3]);
resolvedPromise.then(console.log); // [ 1, 2, 3 ]

• Promise.reject
  주어진 값으로 reject하는 promise를 생성

const rejectedPromise = Promise.reject(new Error('Error!'));
rejectedPromise.catch(console.log); // Error: Error!

• Promise.all
  전달받은 모든 프로미스를 병렬로 처리하고 그 처리 결과를 resolve하는 새로운 프로미스를 반환
• Promise.race
  가장 먼저 처리된 프로미스가 resolve한 처리 결과를 resolve하는 새로운 프로미스를 반환