자바스크립트는 동기적Synchronous 언어입니다 (코드를 순서대로 읽어내리는)
한 번에 하나의 작업만 수행합니다 예를들어, 키오스크를 이용하여 한 줄로 서서 한사람씩 결제하는 느낌이죠
이러한 동작을 단일 스레드(싱글 스레드), 동기Synchronous, 블로킹blocking라고 합니다
호이스팅된 후 작성한 순서에 맞춰 동기적으로 실행됩니다
** 호이스팅은 코드가 실행되기 전 변수 혹은 함수 선언이 해당 스코프의 최상위로 끌어올려지는 현상
블로킹Blocking : 하던 일을 모두 멈추어야 한다 요청에 대한 결과가 동시에 일어나는 synchronous 동기적이다
논 블로킹Non-blocking : 확인 후 나중에 답장할 수 있다 요청에 대한 결과가 동시에 일어나지 않는다 asynchronous 비동기적
비동기가 왜 필요할까요?
어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리는 것이 아니라, 응답에 관계없이 바로 다음 동작이 실행되는 방식을 비동기asynchronous라고 부르는데요
비동기가 필요한 이유는 사용자가 웹서비스를 이용할 때 빠른 응답을 주길 바라고, 다음 동작을 수행하는데 지장을 주지 않기 위해 자바스크립트가 웹 사이트를 동작할 때, 비동기적으로 동작할 수 있어야합니다
동작 원리
- call stack에서 비동기 함수가 호출되면 call stack에 먼저 쌓였다가 web API(혹은 백그라운드)로 이동한 후 해당 함수가 등록되고 call stack에서 사라집니다
call stack :실행하던 함수가 어디였는지 기록해두는 곳(주소) 함수를 실행하다가 안에 있는 함수들 실행 후,
다시 그 위치로 돌아갈 수 있도록 책갈피 같은 느낌이라고 생각하시면 이해하기 편할 것 같아요
-
Web API(백그라운드)에서 비동기 함수의 이벤트가 발생하면, 해당 콜백 함수는 callback Queue에 넣습니다
-
이제 call stack이 비어있는지 이벤트 루프(event loop)가 확인을 하는데 만약 비어 있으면, call stack에 callback Queue에 있는 콜백 함수를 넘겨줍니다 (push)
-
call stack에 들어온 함수는 실행이 되고 실행이 끝나면 call stack에서 사라진다
promise
promise는 비동기 작업이 어떤 상태인지 보여주는 클래스입니다 new promise()를 이용하여 promise 객체를 만들고, 생성자는 특별한 화살표 함수 하나를 인자로 받는데 첫번째 인자로 resolve와 두번째 인자로 reject를 받습니다 이는 성공과 실패 여부를 호출할 수 있는 함수를 의미합니다 그리고 이 특별한 함수를 executor라고 부릅니다
그리고 이 작업이 성공하거나 실패하는 순간에 우리가 뒷처리를 해주어야 하는데 그것이 바로 .then과 .catch 메소드입니다
.then은 promise가 성공했을 때 동작을 지정하고, .catch는 실패했을 때의 동작을 지정합니다
둘 다 함수를 인자로 받고, 체인 형태로 활용 가능합니다
const promise = new promise((resolve, reject)=>{
// 비동기 작업
// ex.
resolve() // 성공 시
})
promise
.then(()=>{
// promise가 resolve(성공)일 때
})
.catch(()=>{
// promise가 reject(실패)일 때
})** 단, 비동기 콜백이라면 단순 try…catch 구문으로는 error를 잡을 수 없다 비동기 콜백이 실행될 때에는 이미 호출 스택이 비워져 try를 찾을 수 없기 때문에 콜백 내부에서 사용하면 잡힌다
try {
// 이 곳에 코드를 실행
} catch (err) {
// error 발생시 여기부터 실행
} finally {
// error와 상관 없이 try/catch 이후에 실행됨
}async await
promise는 세가지 상태를 가집니다 대기pending, 이행fulfilled, 거부rejected
그리고 async 함수의 리턴 값은 무조건 promise 객체
await은 promise가 완료될 때까지 기다립니다 그리고 promise가 resolve한 값을 리턴해주고, reject가 발생하면 예외가 발생합니다
참고 사이트
https://inpa.tistory.com/entry/👩💻-동기비동기-블로킹논블로킹-개념-정리#async-nonblocking
https://velog.io/@cptkuk91/CS48
다른 정보도 쉽게 알려주고 있는 것 같아요 👇🏻
https://velog.io/@jhy979/Javascript-비동기-처리-Promise-async-await
