2. 자바스크립트 비동기 처리

비동기 처리 : 시간이 걸리는 함수와 빨리 처리할 수 있는 함수가 뒤섞여 있을 때, 함수들을 원하는 처리 순서에 맞게 프로그래밍하는 것

 

ch02 - <sync.js> 

※setTimeout() : 특정한 시간이 지난 후에 실행하는 함수

  -밀리초를 0으로 설정해도 함수 자체에 지연 시간이 포함

const displayA = () => console.log("A");

const displayB = (callback) => {
  setTimeout(() => {
    console.log("B");
    callback();
  }, 2000); //2초 후에 displayB 함수 실행
};

const displayC = () => console.log("C");

displayA();
displayB(displayC); //displayB 함수를 실행한 후 displayC 함수를 실행

>> node sync

---

콜백(callback) 함수 : 다른 함수의 매개변수로 사용하는 함수

 

ch02 - <callback.js>

const order = (coffee) => {
  console.log(`${coffee} 주문 접수`);
  setTimeout(() => {
    complete(coffee);
  }, 3000); //3초 뒤에 complete 함수 실행
};

const complete = (coffee) => console.log(`${coffee} 완료!`);

order("아메리카노");

>> node callback

 

콜백 지옥 : 콜백 함수 안에 다른 콜백 함수가 연속으로 있는 경우, 콜백이 계속 반복되는 상태

---

프라미스(promise) : 콜백 지옥이 생기지 않도록, 처리에 성공했을 때와 실패했을 때의 반환 결과를 미리 약속

 

ch02 - <promise.js>

  -new Promise() : 프라미스를 선언

  -.then() : 처리에 성공했을 시 실행

  -.catch() : 처리에 실패했을 시 실행

const likePizza = true;

const pizza = new Promise((yes, no) => { //프라미스 선언
  if (likePizza) { //true
    yes("피자를 주문합니다.");
  } else { //false
    no("피자를 주문하지 않습니다");
  }
});

pizza.then((yes) => console.log(yes)).catch((no) => console.log(no)); //프라미스 체이닝
      //처리에 성공했을 시              //처리에 실패했을 시

>> node promise

 

프라미스 체이닝 : then, catch 함수를 한 줄로 쓰는 것

---

async / await : 프라미스 체이닝으로 인해 코드가 복잡해질 것을 방지

  -async : 함수 앞에 선언하는 명령어

  -await : 비동기 처리를 진행하는 명령어로, async 안에서만 사용 가능

 

ch02 - <await.js>

  -fetch() : 네트워크를 통해 서버에서 자료, 데이터를 가져오는 함수

  -.json() : 가져온 자료, 데이터를 프로그램에서 사용할 수 있는 객체로 변환하는 함수

async function init() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users"); //서버에서 자료 가져옴
  const users = await response.json(); //자료를 프로그램에서 사용할 수 있는 객체로 변환

  console.log(users);
}

init();

>> node await