동기인가 비동기인가?
ℹ️ 동기식 처리는 요청에 대한 응답을 기다린 후, 응답이 오면 다음 요청을 하는 방식
ℹ️ 비동식 처리는 요청에 대한 응답을 기다리지 않고, 다음 동작을 실행하는 방식
비동기처리는 왜 할까?
동시에 여러 일을 수해알 수 있지만, 일정 시간당 요청량이 많이질 경우, 부하가 발생할 수 있으며, 이를 위한 추가적인 처리가 필요할 수 있음
비동기 함수를 동기 함수로 만드는 방법은?
- callback함수
- promise객체
- async/await
callback함수
자바스크립트에서 콜백 함수는 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미
callback함수 문제점
전통적인 콜백 패턴은 일명 '콜백 지옥'로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한 번에 처리하는데 한계를 느꼈다.
promise객체
프로미스는 ES6에서 도입된, 콜백 함수의 문제점인 비동기 처리를 해결하기 위한 또 하나의 패턴이다.
Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는데 이 콜백 함수는 resolve와 reject 함수를 인수로 전달받는다.
const promise = new Promise((resolve, reject) => {
if (/* 비동기 처리 성공 */) {
resolve('result');
} else { /* 비동기 처리 실패 */
reject('failure reason');
}
});
Promise 생성자 함수가 인수로 전달받은 콜백 함수 내부에서 비동기 처리를 수행한다. 이때 비동기 처리가 성공하면 resolve를, 실패하면 reject를 호출한다.
async/await
async/await
는 프로미스를 기반으로 동작하기 때문에 프로미스의 then/catch/finally
등의 후속 처리 메서드에 콜백 함수를 전달해서 비동기 처리 결과를 후속 처리할 필요 없이
마치 동기 처리처럼 프로미스를 사용할 수 있다.
async는 function 앞에 위치합니다.
📍 async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환합니다.
await는 async 함수 안에서만 동작합니다.
📍 자바스크립트는 await 키워드를 만나면 프라미스가 처리(settled)될 때까지 기다립니다. 결과는 그 이후 반환됩니다.
async function foo() {
const a = await new Promise((resolve) => setTimeout(() => resolve(1), 3000));
const b = await new Promise((resolve) => setTimeout(() => resolve(2), 2000));
const c = await new Promise((resolve) => setTimeout(() => resolve(3), 1000));
console.log([a, b, c]); // [1, 2, 3]
}
foo(); // 약 6초 소요된다.
Promise와 async/await의 차이점
-
에러 핸들링
Promise는 .catch() 문을 통해 에러 핸들링을 해야 하지만,
async/await은 try / catch를 통해 에러를 처리할 수 있다. -
코드 가독성
Promise의 후속 처리 메서드인 .then()의 hell의 가능성
async/await은 프로미스의 후속 처리 메서드 없이 마치 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현할 수 있기 때문에 코드 흐름을 이해 하기 쉽다.
Author And Source
이 문제에 관하여(동기인가 비동기인가?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dltjsgho/동기인가-비동기인가저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)