JavaScript 비동기 처리 방법(Promise, async, await)

• 콜백(Callback)이란?

다른 함수를 파라미터로 받아서, 그것을 내부에서 호출하는 함수

function A(callback){
  callback();
}

function B(){
  console.log("콜백이지롱");
}

A(B);

함수 자체를 연결하는 것(함수 실행을 연결하는 것 아님)

함수의 실행이 끝나면 지정한 콜백함수를 실행해 주도록 함수에 요청할 때 사용

 

위의 사진처럼 콜백함수 여러 개를 중첩한다면?

-> 가독성이 너무 안좋아짐.. 이런 걸 콜백 지옥이라고 부름

 

콜백지옥을 어떻게 해결하는지 알아보자!

---

• Promise

- Promise는 비동기 작업의 단위

- 미래에 어떤 종류의 결과가 반한됨을 약속(Promise)해주는 Object!

const promise1 = new Promise((resolve, reject) => {
  //비동기 작업
});

• 생성자는 첫 번째 인자로 resolve, 두 번째 인자로 reject를 받음
• resolve와 reject는 executor 내에서 호출할 수 있는 또 다른 함수
  -> 성공하면 resolve, 실패하면 reject 호출
• Promise가 끝나고 resolve가 호출되면 then이 실행되고, reject가 호출되면 catch가 실행됨
• then과 catch는 인자로 함수를 받음
• resolve와 reject에 넣어준 인자는 각각 then과 catch의 매개변수에서 받을 수 있음

const promise1 = new Promise((resolve, reject) => {
  resolve();
});

promise1
  .then(() => {
    console.log("then!");
  })
  .catch() => {
    console.log("catch!");
  });

- 위의 코드 실행 결과는?

resolve()가 호출되었으므로 then!이 출력됨

---

• async / await

- Promise를 조금 더 편하게 사용할 수 있도록 해줌

async function printAnimals(){
  const animals = await getAnimals();	*
  console.log(animals);
}

*이 표시된 줄에서 실행이 잠시 중단되고 Promise 처리되면 실행 재개됨

 

위의 코드에서 async/await를 사용하지 않았다면?

getAnimals()의 수행시간이 길어서 콘솔창에 undefined가 출력되었을 것임

 

∘ async

async 키워드는 function 앞에 사용

리턴 값은 항상 Promise

 

∘ await

async 함수 안에서만 동작

Promise가 처리될 때까지 기다리는 역할

(Promise 처리를 기다리는 동안 엔진이 다른 일을 할 수 있음)

 

∘ 예외처리

Promise에서는 .catch로 예외처리를 했지만, async/await에서는 try ~ catch 를 사용함

async function loadData() {
	try {				//성공했을때
    	const result = await getData();
        console.log(result);
     } catch(e) {			//실패했을때
     	console.log(e);
     }
}

loadData();

---

• 결론!

 

async/await를 사용하면 await가 대기를 처리해줘서 .then이 거의 필요하지 않음

.catch 대신 일반 try~catch를 사용할 수 있다는 것도 장점임

대부분 Promise 방식보다 async/await 방식을 사용하는 것이 더 편리함!