20240702.TUE 비동기처리
동기처리
- 순차적으로 처리하는 코드
비동기 처리
- 오래 걸리는 작업이 종료될 때까지 기다리지 않고, 다음 작업을 수행할 수 있도록 하는 유연한 프로그래밍 방식
- 오래 걸리는 작업을 빨리 끝날 작업보다 먼저 실행하게 될 경우 지연문제가 발생함.
JS 에서의 비동기 처리 방식 3가지
1. 콜백 함수 사용
- 전통적으로 사용되어오고 있는 방식
- 단점: 콜백 함수가 연속해서 사용되는 경우가 발생 ->콜백 지옥
콜백 지옥을 개선한 방법 = Promise 방식
2. Promise 방식
step1. promise 객체 생성하기
- resolve 콜백 : then() 메소드와 연결됨.
- reject 콜백 : catch() 메소드와 연결됨.
step2. promise 객체를 사용하는 쪽을 구현하기
- then() 메소드 : promise 에서 성공했다는 결과를 받아서 처리
- catch() 메소드 : promise 에서 실패했다는 결과를 받아서 처리
- finally() 메소드 : 마지막으로 처리해야 할 부분을 구현
step3. promise chaining
- then() 메소드를 사용해서 여러 개의 프로미스를 연결하는 것.
ex)
promise().
then(step1).
then(step2).
then(step3).- 콜백 지옥 보다는 상대적으로 각 단계에서의 처리에 대한 정의가 명확해짐.
2.a) 장점
- promise 객체 작성시, resolve, reject 사용.
=> 성공과 실패에 대해서 명확하게 구분이 가능함
=> 콜백 지옥을 해결할 수 있음.
3. async, await 방식
- 등장배경)
promise가 콜백 메소드 방식에서는 개선되었으나, 메소드 체이닝을 너무 길게 사용할 경우 메소드가 힘들어진다.
이러한 문제점을 해결하기 위한 대안이 async, await 임
a. async (비동기) 예약어 - 메소드 선언시 사용하게 되고, promise 를 반환함.
b. await (대기) 예약어 - await 는 async 메소드에서만 사용 가능하다.
- setTime을 사용해서 비동기 처리하기
setTimeout(
function () {
console.log("1번");
}, 3000 // 3초란 의미
)
console.log("2번");-> 동기처리의 경우 3초가 지난 다음에 1번이 실행이 되고 2번이 실행이 되어야 함.
-> 비동기 처리의 경우 처리 시간이 짧은 "2번"이 먼저 실행이되고, 3초가 지나서 처리 시간이 긴 1번이 실행된다.
- 비동기 방식을 사용해서 커피 주문하기
function orderCoffee(coffee, time) {
setTimeout(() => {
console.log(`${coffee} 제조 완료`);
}, time);
}
orderCoffee("스윗 커피", 4000); //3
orderCoffee("얼그레이 티", 2000); //1
orderCoffee("아이스 커피", 3000); //2- setTimeout()을 활용한 비동기 처리
function double(num) {
return (
setTimeout(() => {
const doubleNum = num * 2;
console.log(doubleNum);
return doubleNum;
}),
1000
);
}
const res = double(10);
console.log("res: " + res);
double(10);- callback 메소드를 활용한 비동기 처리
function double(num, callback) {
setTimeout(() => {
const doubleNum = num * 2;
// console.log(doubleNum);
callback(doubleNum);
}),
1000;
}- double 함수에서 처리된 결과값을 외부에서 사용할 수 있다는 것이 중요함
-> 콜백 메소드를 활용해서 비동기 처리가 가능
-> 비동기 처리에서의 결과값을 반환받아서 사용할 수 있다.
double(10, (result) => {
console.log("result: " + result);
}); 