비동기

jihyun·2021년 9월 12일
0

TIL

목록 보기
12/17
post-thumbnail

동기? 비동기?

동기 (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에서 실행
  1. return value - 미래에 성공이나 실패에 대한 결과를 알려줄 것이라는 약속을 담은 객체가 주어져 이 프러미스 객체를 이용해 반환하거나 자유롭게 다른 모듈로 넘겨줄 수 있다.
  2. error handling - errror 던져서 동기코드와 유사한 흐름으로 처리가 가능하다.
  3. 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의 함수들을 순서대로 하나씩 실행한다.

Web API

브라우저에서 흔히 필요한 기능들을 js와 함께 연동하여 사용할 수 있도록 제공되는 추가 리소스

  • DOM 관련 작업 (document)
  • window 관련 작업 (setTimeout, setInterval 포함)
  • AJAX 요청 관련 작업 (fetch, XMLHttpRequest 포함)
    위에 나열된 부분은 사실 자바스크립트가 아닌 Web API라고 부르는 부분입니다.

Task Queue

태스크로 이루어지는 하나의 집합
자바스크립트 엔진은 태스크 큐의 태스크들을 차례대로 처리하고, 새로운 태스크가 추가될 때까지 기다린다

0개의 댓글