[2/23] Promise & Async, Await & AJAX

릿·2023년 2월 23일
0

CS스터디

목록 보기
4/18

1. Promise

1. Promise의 정의

  • ES6에서 비동기 처리를 위한 패턴으로 도입됨. 콜백 패턴이 가진 단점(콜백 헬, 에러 처리)을 보완하며, 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있음.
  • 후속처리 메서드로는 then, catch, finally가 있음
  • 프로미스의 후속처리 메서드의 콜백함수는 마이크로태스크큐에 저장됨!
  • 프로미스의 상태
    pending : 비동기처리가 아직 수행되지 않은 상태
    fulfilled: 비동기 처리 수행(settled상태, 성공), resolve함수 호출
    rejected: 비동기 처리 수행(settled상태, 실패), reject함수 호출

1. then메서드

  • 언제나 프로미스를 반환함
  • 첫번째 콜백함수는 비동기 처리가 성공했을 때, 두번째는 실패했을 때 호출되는 콜백함수다

2. catch메서드

  • 언제나 프로미스를 반환함
  • 프로미스가 rejected상태인 경우만 호출됨
  • 한개의 콜백함수를 인수로 전달받음

3. finally메서드

  • 언제나 프로미스를 반환함
  • 한개의 콜백함수를 인수로 전달받음
  • 프로미스의 성공, 실패와 상관없이 무조건 한번 호출됨

2. Promise.all()이란?

  • 여러 개의 비동기처리를 모두 병렬처리할 때 사용함.
    ex) api요청할 게 3개가 있다면 3개 한꺼번에 실행하고, 응답은 배열로 받게 됨.
  • 입력 값으로 들어온 프로미스 중 하나라도 거부 당하면 Promise.all()은 즉시 거부함
  • Promise.race(): 여러 비동기 처리를 다룰 때 가장 먼저 fulfilled된 처리 결과를 반환

3. Promise와 Callback 비교

  • 콜백 패턴의 단점으로는 첫번째로 콜백 헬, 두번째로 에러처리가 어렵다는 점이 있다.

1. 콜백 헬

  • 콜백함수를 통해 비동기 처리 결과에 대한 후속처리를 하기 위해 또 비동기함수를 호출하고 해야하지만, 프로미스의 경우, 프로미스의 후속처리를 하기 위해 then, catch, finally를 사용한다.

2. 에러처리

  • 콜백함수의 경우, 에러처리가 곤란하다는 문제가 있다. 하지만 프로미스의 경우 then, catch, finally를 통해 에러처리를 할 수 있다.
    ex) try문의 setTimeout함수의 콜백함수에서 발생시킨 에러는 setTimeout의 타이머가 실행되기 이전에 콜스택에서 제거된 상태이기 때문에 catch문에서 에러를 캐치하지 못한다. 에러는 콜스택의 아래방향, 실행컨텍스트 방향으로 전파되기 때문.

2. Async, Await

1. Async, Await의 정의

  • ES8에서 비동기처리를 동기 처리처럼 동작하도록 구현할 수 있게 도입된 개념
  • 프로미스 기반으로 동작하며, 후속처리 메서드 사용 없이 동기처럼 프로미스를 사용할 수 있음.

1. Async함수

  • async함수는 언제나 프로미스를 반환한다.

2. Await키워드

  • 프로미스가 settled상태가 될 때까지 대기하다가 settled상태가 되면 프로미스가 resolve한 처리 결과를 반환함.

2. Async, Await의 사용방법

  • async는 비동기 처리해야할 함수 앞에 붙여주고, await는 반드시 async함수 내부의 프로미스 앞에 사용해야 함.
  • 에러 처리시에는 try-catch를 사용할 수 있음.

3. Promise와 Async, Await의 차이

  • Async, Await는 Promise의 꼬리에 꼬리를 무는 코드를 해소하고자 만들어짐
  • 에러 핸들링
    • Promise 를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하지만, async/await 은 에러 핸들링 할 수 있는 기능이 없어 try-catch() 문을 활용해야 한다
  • 코드 가독성
    • Promise의 .then() 지옥의 가능성
    • 코드가 길어지면 길어질수록, async/await 를 활용한 코드가 가독성이 좋다.
    • async/await은 비동기 코드가 동기 코드처럼 읽히게 해준다. 코드 흐름을 이해하기 쉽다.

3. AJAX

1. AJAX란?

  • Ajax(Asynchronous JavaScript and XML)는 웹 구현시 웹 페이지 전체를 다시 로딩하지 않고, 서버와 비동기적으로 통신할 수 있는 개발기법
  • 브라우저에서 제공하는 Web API인 XMLHttpRequest객체를 기반으로 동작함
  • JSON형식을 사용함

2. 전통방식과 비교

  • 전통방식 : 화면이 전환되면 서버로부터 새로운 HTML페이지를 전송받아 웹페이지 전체를 처음부터 다시 렌더링 함
    단점 :
    • 매번 완전한 HTML을 서버로부터 받으므로 불필요한 데이터 통신 발생
    • 변경이 필요없는 부분까지 리랜더링하므로 화면 전환 시 화면 깜빡임 현상 발생
    • 서버 요청 시, 서버로부터 응답이 있을 때까지 다음 처리는 블로킹 됨
  • ajax : 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식
    장점 :
    • 필요한 부분만 서버로부터 전송받기 때문에 불필요한 데이터통신이 발생하지 않음
    • 변경할 필요가 없는 부분은 리렌더링하지 않기 때문에 화면 깜빡임 현상이 발생하지 않음
    • 통신이 비동기 방식으로 동작하므로 블로킹이 발생하지 않음

3. HTTP 요청 전송 순서

  1. XMLHttpRequest 객체 생성
  2. open메서드로 HTTP요청을 초기화 함
  3. 필요에 따라 setRequestHeader메서드로 특정 HTTP요청의 헤더 값을 설정함
  4. send메서드로 HTTP요청을 전송함
profile
항상 재밌는 뭔가를 찾고 있는 프론트엔드 개발자

0개의 댓글