오늘은 프로미스에 대해서 글을 작성해보려고 합니다. 콜백 함수 내용을 정리하다보니 동기/비동기, 이벤트루프, 콜백함수까지 작성을 했는데 콜백 함수는 비동기처리를 위해 사용이 되었습니다. 하지만 콜백 함수를 사용하면 콜백지옥에 빠질수있는데 그를 해결하기 위해 promise를 도입하게 되었습니다.
자바스크립트 비동기처리 3가지
- Callback Function
- Promise
- async/await
Callback Hell
콜백 함수는 다른 함수에 매개변수로 넘겨주는 함수, 매개변수로 받은 함수는 나중에 실행이 됨.
콜백 함수를 사용하면 콜백 지옥에 빠질수 있다.
다른 함수에 매개변수로 넘겨주는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들어질 정도로 깊어지는 현상을 뜻합니다.
이러한 콜백 지옥을 해결하기 위해 새로운 비동기 처리 방법으로 Promise가 등장하게 되었습니다.
Promise
콜백 지옥을 해결해주고 비동기 처리로 사용이되는 es6에 등장했다.
Promise 3가지 상태와 resolve, reject
Promise는 처리 과정 중에 상태를 가지게 되는데 수행 중인지, 완료해서 성공했는지, 실패했는지에 대해 3가지 상태를 가진다.
- Pending(대기) : 비동기 처리가 진행 중인 상태
- Fulfilled(이행) : 비동기 처리가 성공된 상태
- Rejected(실패) : 비동기 처리가 실패된 상태
Pending(대기)
이 부분이 대기 상태로 이루어 진다. new Promise()를 호출하면 대기 상태가 됩니다.
new Promise로 생성을 할 수 있고 콜백 함수를 선언 가능하고 인자 값은 resolve와 reject이다.
Fulfilled(이행)
resolve를 사용해서 이행 상태로 만든 다음 then을 사용하면 결과 값을 받을 수 있습니다.
Rejected(실패)
reject를 사용해서 실패 상태로 되며 catch를 사용하여 실패 값을 얻을 수 있습니다.
async/await
promise를 간결하게 사용을 할 수 있고 사용시 코드 가독성과 유지보수가 좋아진다.
-
async
함수 앞에 붙으며 async함수로 만들 수 있다. async함수는 항상 promise를 반환한다. -
await
promise객체 앞에 붙여쓰며, 해당 프로미스가 처리될 때 까지 될 때까지 기다린후 결과값을 반환 한다. async함수 내부에서만 사용이 가능하다.
try-catch
async함수 안에서 예외처리 할 때 사용된다.
