promise, promise.all

shong1332·2021년 8월 11일
0

스터디

목록 보기
5/5

1. 들어가기 앞서

들어가기 앞서 사실 promiss.all을 이야기 하려는데 비동기와 promise을 빼놓고서는 말이 안되다는 사실을 알고 있다.
그와 더불어 비동기, promise, promise.all 을 한곳에 담아 정리한다는것 또한 말이 안된다는 사실을 알고있다.

1. 동기, 비동기

동기 작업은 컴퓨터가 코드를 일종의 '직렬'의 형태로 읽어 내려가는것을 말한다.
승글 스레드 언어인 자바스크립트의 특성인데 이때문에 화면이 렌더링될때 작업을 완료하기전까지 화면이 블록되는 경우가 종종 발생하고는 한다.

이를 해결하기 위해 나타난것이 비동기 개념인데 '은행의 번호표'의 개념으로 이해하면 편하겠다.
내 앞 번호표를 뽑은사람의 업무가 늦게끝나든 일찍 끝나든 상관없이 나는 다음번호의 호출창구로가서 업무를 보면되는 것이다.

경우에 따라 쓰임새는 다를 수 있겠지만 비동기의 코드는 복잡하지만 다른작업을 병렬의 형식으로 진행할 수 있어 효율적인 코딩을 할 수 있다.

2. promise

출처는 mdn.

우리는 Es6에서 promise를 언어적 차원에서 지원해주기 전까지 복잡해도 너무 복잡한 코드와 예외처리의 어려움을 감래하면서 까지 앞서 말한 비동기 작업을 구현하기 위해 콜백함수를 사용해왔다.

함수에 콜백을 전달하는 대신에, 콜백을 첨부하는 방식으로 promise라는 메서드가 등장함으로서 자칫 '콜백 지옥' 이라는 곳에 빠지기 일수였지만 이 모든 문제를 한번에 해결 하게 되었다.

많은 블로그에서 "예약시스템" 쯤으로 설명하고 있는 promise는 비동기적으로 실행되는 작업의 결과를 실패이든, 성공이든 대기든, 개체로서 반환해준다.
예약된 작업을 마치기 전까지 다음 코드를 읽어 올 수 있다는게 promise 사용의 이유인것이다.

3. promise.all

프로그래머들은 정말 대단하다.
비동기 방식이 불편해서 promise를 통해 병렬을 구현해내고
그 promise을 또 한번 비동기적 병렬구조로 실행하여 실행이 완료되는 시간을 단축 시켜냈기 때문이다.

Promise.all은 모든 promise가 이행될때까지 기다렸다가 이 결과값을 배열로서 반환해준다.
promise가 이행되는 도중 에러가 발생되었다면 가장 처음 발생된 에러의 시간을 기준으로 동작이 종료되며 에러값을 뱉어주게 된다.
즉 입력된 promise가 하나라도 리젝드 되게 되면 promise.all또한 리젝드 되게 된다는 것이다.

이러한 promise.all은 앞서 말했듯 여러개의 promise의 실행을 약속받고 다음 로직을 실행시키기 위해 사용하게 되는데 백엔드에서 필요한 정보를 받아오기전 화면의 랜더하기 위해 사용된다.

profile
히히히

0개의 댓글