동기와 비동기

정확한 뜻도 모르고 남발했던 async, await ..
이전 글인 axios 정리 중 동기, 비동기의 개념을 제대로 잡아야겠다 결심했습니다! 🧐🧐🧐

1. 동기와 비동기의 개념

(참고: https://private.tistory.com/24)

• 동기(synchronous; 동시에 일어나는): 요청과 결과가 동시에 발생 -> 요청을 하면 시간이 얼마가 걸리던지 그 자리에서 결과가 주어져야 함
• 비동기(Asynchronous; 동시에 일어나지 않는): 요청과 결과가 동시에 일어나지 않을거라는 약속 -> 요청한 그 자리에서 결과가 주어지지 않음
• 장단점
  • 동기: 설계 간단, 직관적 / 결과 나올 때까지 다른 일 못하고 대기해야 함
  • 비동기: 비교적 복잡, 흐름 예측 어려움 / 결과 나오는 동안 다른 작업 할 수 있으므로 자원 효율적 사용 가능

2. Promise

(참고: https://elvanov.com/2597)
+) 콜백 함수: 함수의 인자로 들어가는 함수
-> https://www.hanumoka.net/2018/10/24/javascript-20181024-javascript-callback/

• Promise: 비동기 작업의 단위
• 기본 사용법

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

• const로 선언하는 것이 가독성, 유지보수에 유리
• 생성자에 화살표 함수 인자로 넣어주기 -> 이 함수의 이름은 executor
• executor의 인자 resolve, reject (이름 바꿔도 되지만 국룰 따르기)는 executor 내에서 호출할 수 있는 또 다른 함수
• resolve 호출하면 "이 비동기 작업 성공했어!", reject 호출하면 "이 비동기 작업 실패했어.." 의미
• new Promise(... 하는 순간 할당된 비동기 작업 바로 시작됨
• 예시

const p1 = new Promise((resolve, reject) => {
  // resolve(); 넣으면 then! 나옴
  // reject(); 넣으면 catch! 나옴
});
promise1
  .then(()=>{
    console.log("then!");
  })
  .catch(()=>{
    console.log("catch!");
  });

(📍 이해에 많이 도움이 된 사진 한 장 같이 퍼와서 첨부해둡니당)

3. async, await

(참고: https://joshua1988.github.io/web-development/javascript/js-async-await/)

• 함수 선언 시 맨 앞에 async 붙이면 Promise 리턴 가능

function startAsync(age){
  return new Promise((resolve, reject)=>{
    if(age>20) resolve('success');
    else reject(new Error('wrong');
  });
}

////////////////// 같은 의미 //////////////////

async function startAsync(age){
  if(age>20) return 'success';
  else throw new Error('wrong');
}

• await는 async 함수에서만 사용 가능
• await [[Promise 객체]] Promise 완료될 때까지 기다려라!

(너무 어려워.. 예시 보며 이해하자😂)

• 기본 문법

async function 함수이름(){
  await 비동기_처리_메소드이름();

• 예시

async function logItems() {
  var resultItems = await fetchItems();
  console.log(resultItems); // [1,2,3]
}

-> await 사용 안했다면, 데이터 받아온 후 콘솔 출력할 수 있게 콜백함수나 .then() 사용해야했을 것!

• 실용 예제

async function logTodoTitle() {
  try {
    var user = await fetchUser();
    if (user.id === 1) {
      var todo = await fetchTodo();
      console.log(todo.title); // delectus aut autem
    }
  } catch (error) {
    console.log(error);
  }
}

-> try, catch 사용도 확인해보기!