[JavaScript] 동기 VS 비동기 / promise

박소정·2022년 4월 8일

동기 VS 비동기

동기 순차적으로 실행. 실행되고 있던 것이 다 끝날때까지 기다렸다가 다음 일을 실행. 비동기보다 더 오랜 시간이 걸림.

비동기 동시적으로 실행되지만 각자 자신의 시간을 가지며 일을 함.

생활코딩님 강의가 아닌 다른 유튜브에서 봤던 예전에 봤던 영상인데 비유가 찰떡이었어서 함께 메모해 보자면,

동기적으로 집안일을 실행할 경우, 세탁기를 돌리면 세탁기가 끝날때까지 기다리고, 세탁기가 끝나면 청소기를 밀고, 청소기를 다 밀고 난 후 짜장면을 배달시키고... 이런식으로 하나의 일이 마무리 되야지만 다음 일을 처리하는 것이었다.

비동기적으로 집안일을 실행할 경우, 짜장면을 배달시켜두고, 세탁기를 동작시키고, 세탁이 되는동안 청소기를 밀고... 이런식으로 집안일을 진행하여 훨씬 더 시간이 적게 걸리게 된다.

웹사이트가 동작할때에는 비동기적으로 네트워크와 소통하면서 동작한다. 만약 동기적으로 동작을 했다면 통신을 하는 동안에 사용자는 아무것도 하지 못하게 될 것이다.

웹페이지가 서버와 통신할때 사용하는 api가 fetch인데, 이 fetch api가 promise를 사용한다!

fetch API

fetch(response(보통 url))
fetch API는 자바스크립트에서 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 새로고침 없이 한다.
promise data type을 반환하며, promise data type은 response object를 반환한다.

promise

promise는 비동기적인 작업을 처리할 때 성패여부를 표준화된 방식을 통해 확인 가능하게 해준다.

promise의 생성은 new라는 생성자를 사용하고, 콜백함수가 공급이 되어야한다. 이때 함수는 2개의 parameter(성공, 실패)를 받아야 한다.

new promise (function(resolve, reject){
	setTimeout(function(){
      resolve("resolved ok!");
    }, 2000);
});

.then()

promise의 결과가 성공할 경우 then으로 호출된 콜백함수가 실행된다.

then은 인수로 2가지를 받을 수 있는데,
첫번째 인수는 promise가 성공했을 때 실행되는 함수로, 실행 결과를 받는다.
두번째 인수는 promsie가 거부되었을 때 실행되는 함수로, 에러를 받는다.
만약 성공했을 경우만 다루고 싶다면 한가지의 인수만 입력하는것도 가능하다!