비동기

jihyun·2021년 9월 12일

JavaScript 비동기

TIL

목록 보기

12/17

동기? 비동기?

동기 (sync) : 내 요청이 완료될 때까지 기다린다!
-> 우리가 일반적으로 쓰는 코드는 동기적으로 실행된다.

비동기 (async) : 다른 절차들이 진행될 수 있게 요청하고 사라진다!

비동기의 예

setTimeout

function multiply (a, b) {
  return a * b;
}

function square (n) {
  return multiply(n, n);
}

console.log("Start");

setTimeout(function doSomething () {
  const result = square(2);
  console.log(result);
}, 1000);

console.log("end");

fetch

// fetch: 서버에 요청을 넣는 함수 - 요청이 응답받으면 then의 인자로 오는 함수가 실행
fetch(("요청".then((res) => { console.log("Response", res)})

Callback

비동기적으로 수행하는 함수는 함수 내 동작이 모두 처리된 후 실행되어야 하는 함수가 들어갈 콜백을 인수로 반드시 제공해야 한다.
(* 콜백함수? 나중에 호출할 함수)
동작이 많은 경우엔 "콜백 지옥"을 만들 수 있다.

비동기 처리를 위한 Promise

비동기로 실행되는 코드는 콜백 함수 내부에서 에러에 대한 분기처리가 필수적이다.

new Promise(function (resolve, reject) //생성자 함수로 Promise 객체를 생성하고 함수를 인자로 받음
            
const promise = new Promise(function (resolve, reject) {
  // 비동기 작업
  // 성공할 경우 resolve 함수 실행
  // 실패할 경우 reject 함수 실행
});

프러미스 객체는 미래에 맞이할 성공 혹은 실패에 대한 결과값을 가진다.

Pending: 아직 결과가 정해지지 않은 상태
Fulfilled: 성공한 상태
Rejected: 실패한 상태

promise.then(function (data) {
  console.log("Promise success!", data);
});
//then => fulfilled에서 실행

promise.catch(function (err) {
  console.log("Promise Failed!", err);
});
//catch => rejected에서 실행

return value - 미래에 성공이나 실패에 대한 결과를 알려줄 것이라는 약속을 담은 객체가 주어져 이 프러미스 객체를 이용해 반환하거나 자유롭게 다른 모듈로 넘겨줄 수 있다.

error handling - errror 던져서 동기코드와 유사한 흐름으로 처리가 가능하다.

extension

읽고, 쓰기 쉬운 비동기 코드를 async/await로

async function foo() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

foo();

함수 앞에 async?
함수는 언제나 프라미스를 반환하고, 함수 안에서 await를 사용할 수 있다!

프라미스 앞에 await?
자바스크립트는 프라미스가 처리될 때까지 대기한다.
처리가 완료되면 조건에 따라 아래 동작이 이어진다.
에러 발생 – 예외 생성(에러가 발생한 장소에서 throw error를 호출한 것과 동일함)
에러 미발생 – 프라미스 객체의 result 값을 반환

Event Loop

태스크가 들어오길 기다렸다가 태스크가 들어오면 이를 처리하고, 처리할 태스크가 없는 경우엔 잠드는, 끊임없이 돌아가는 자바스크립트 내 루프

console.log("start");

setTimeout(function foo () {
  console.log("foo!");
}, 0);

console.log("end");

foo함수는 Web API로 전달 => 나머지 실행 => Web API로 이동된 foo 0초를 셈 => Callback queue로 이동 => Callstack 비면 foo함수 실행
*Call Stack이 비었는지를 주기적으로 확인하고 Call Stack이 비었을때, Callback Queue의 함수들을 순서대로 하나씩 실행한다.