p r o g r a m m i n g

비동기

hee.hee 2022. 5. 29. 23:23

동기: 요청 후 응답까지 다른 요청을 못함

비동기: 요청 받고 서버가 그 요청을 처리하는 동안, 다른 일을 할 수 있음. 동시에 함께 할 수 있음. 로딩이 이루어지는 부분은 로딩중이지만, 다른 컴포넌트들은 조작 가능.

 

 

 

 

 

 

비동기의 주요 사례

DOM Element의 이벤트 핸들러

  • 마우스, 키보드 입력(click, keydown 등)
  • 페이지 로딩(DOMComentLoaded 등)

타이머

  • 타이머 API (setTimeout 등): 딜레이 시켰다가 실행
  • 애니메이션 API (requestAnimationFrame)

서버에 자원 요청 및 응답

  • fetch API
  • AJAX (XHR)

 

브라우저의 비동기 함수 작동원리 키워드 '이벤트 루프'

 

 

 

 

콜백

비동기 처리의 순서를 제어할 수 있는 방법이다.

원하는 순서대로 콜백함수 안에 넣으면 순차적으로 실행됨

A -> B -> C  순서로 함수를 실행해야 한다면,

A의 콜백으로 B를, B의 콜백으로 C를 넣는다.

하지만 코드가 길어지면 hell

 

 

 

 

 

Promise

promise로 콜백 핸들링할 수 있다.

정해진 기능을 수행하고, 성공메시지와 결과값 리턴. 아니면 에러 리턴

예 / 미리 수강신청한 사람은 개강이 된 후 연락을 받음. 반면 개강 후 신청하면 바로 강의를 들을 수 있다.

자바스크립트에 내장된 오브젝트. 비동기적인 작업을 할 때 콜백함수 대신 유용하게 쓸 수 있다.

 

상태 state (수행 중, 성공, 실패)

제공자 producer 과 소비자consumer

 

state 수행중이면 펜딩. 성공했으면 풀필드 상태. 에러 시 리젝티드 상태.

프로듀서(프로미스 오브젝트) / 소비하는 컨수머

 

 

1. 프로듀서

프로미스 클래스의 콜백함수가 executor이다. 프로미스가 만들어지면 executor함수가 자동으로 실행된다.

 

Promise.prototype.then은 Promise를 반환하므로 메서드 체이닝(Chaining)을 할 수 있습니다.
Promise.prototype.catch는 Promise를 반환하기 때문에 Promise.prototype.then처럼 메서드 체이닝이 가능하며 에러가 난 경우 실행됩니다. Promise.prototype.then은 사실 다음과 같이 두 개의 콜백 함수를 받을 수 있습니다. 
Promise.prototype.then(onFulfilled, onRejected)
 두번째 파라미터에는 에러가 났을 경우의 콜백 함수를 적어주면 Promise.prototype.catch와 같은 역할을 할 수 있습니다.

 

 

 

 

 

 

타이머 관련 API

setTimeout(callback, millisecond)

  • 일정시간 후에 함수 실행
  • 매개변수(parameter): 실행할 콜백 함수, 콜백 함수 실행 전 기다려야 할 시간 (밀리초)
  • return 값: 임의의 타이머 ID
setTimeout(function () {
  console.log('1초 후 실행');
}, 1000);
// 123

 

 

clearTimeout(timerId)

  • setTimeout 타이머를 종료
  • 매개변수(parameter): 타이머 ID
  • return 값: 없음
const timer = setTimeout(function () {
  console.log('10초 후 실행');
}, 10000);
clearTimeout(timer);
// setTimeout이 종료됨.

 

 

setInterval(callback, millisecond)

  • 일정 시간의 간격을 가지고 함수를 반복적으로 실행
  • 매개변수(parameter): 실행할 콜백 함수, 반복적으로 함수를 실행시키기 위한 시간 간격 (밀리초)
  • return 값: 임의의 타이머 ID
setInterval(function () {
  console.log('1초마다 실행');
}, 1000);
// 345

 

 

clearInterval(timerId)

  • setInterval 타이머를 종료
  • 매개변수: 타이머 ID
  • return 값: 없음
const timer = setInterval(function () {
  console.log('1초마다 실행');
}, 1000);
clearInterval(timer);
// setInterval이 종료됨.

 

 

 

 

then은 리졸브된 프로미스 객체를 리턴한다. "프로미스를 리턴"

리턴하지 않으면, 리졸브는 언디파인드가 된다.

then 안에서 return 안하면, undefined Promise {resolve: undefined}

resolve와 reject 모두 return 해주지 않으면 의미가 없다.(별개의 프로미스 객체가 생성될 뿐, 현재 실행되는 프로미스 체인에 영향을 주지 않는다)

언디파인드여도 then 체이닝은 계속된다. 그냥 프로미스가 계속 리턴은 되니, 그걸 다음 덴에 줌.

 

 

2. 동기적 코드처럼 사용

 

체이닝을 어웨잇으로 바꾸면

어웨잇 걸린 프로미스에 데이커가 들어감. 

위에 2. then 으로 실행한 것과 같다.

근데 더 읽기 쉬움

 

3. 트라이 캐치

 

 

 

 

5. 에이싱크 함수는 항상 프로미스 리졸브된 값으로 리턴함.

리젝트라고 주지 않으면 다 리졸브 값으로 처리함.

 

async 키워드는 await, return promise 함수와 함께 써야한다.

await 키워드 다음에 오는 함수는 프라미스를 리턴해야한다.

 

fetch는 프라미스를 리턴한다.