맛집지도 만들기 - Javscript 비동기 처리

동기/ 비동기란?

동기(syncronous): 코드 한줄씩 실행이 끝난 뒤 다음 코드로 넘어가는 처리 방식

비동기(asyncronous): 코드 실행 후 완료 여부와 관계없이 다음 코드로 넘어가는 처리 방식

 

비동기 방식은 효율적이지만 문제가 발생할 수 있다.

API 요청으로 반환된 값을 반드시 활용해야하는 경우라면 코드의 실행 순서를 보장받아야 함.

 

JS 비동기 처리

1. callback 함수

2. promise 객체

3. async, await

 

Callback 함수 사용: 함수 안에 함수를 넣기

ex)

// 1
console.log("1등!");
// 2
setTimeout(function () {
  console.log("2등!");
  // 3
  setTimeout(function() {
console.log('3등!');
}, 2000);
}, 2000);

=> 함수가 많이 필요한 경우에는 비효율적임

 

Promise 객체: callback함수의 단점을 개선한 방법

대기(promise 객체를 새로 생성한 상태), 이행(resolve 실행. 비동기 로직이 완료), 거부(reject 실행. 비동기 로직 에러) 상태값 존재

ex)

const hi = new Promise((resolve, reject) => {
  // resolve("good");
  reject("fail");
});

hi
.then((res) => console.log(res))
.catch((err) => console.log(err));

 

resolve가 호출 -> 이행상태 -> promise 객체의 then() 메서드 호출

reject가 호출 -> 거부상태 -> promise 객체의 catch() 메서드 호출

 

async, await: promise와 비슷, 사람이 읽기 쉬움

ex) 

async function asyncFunction() {
  console.log("1등");
  await second();
  await third();
}

function second() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("2등");
      resolve();                     // resolve가 호출되야지만 promise의 대기 상태가 끝
    }, 2000);
  });
}

function third() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("3등");
      resolve();
    }, 2000);
  });
}

asyncFunction();