[Javascript] 프로미스(Promise), fetch, axios

 

프로미스란?

 

비동기처리를 위한 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. 

 

프로미스란 ES6에서 도입한 비동기 처리를 위한 패턴이다.

전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다.

 

 

// Promise 객체의 생성
const promise = new Promise((resolve, reject) => {
  // 비동기 작업을 수행한다.

  if (/* 비동기 작업 수행 성공 */) {
    resolve('result');
  }
  else { /* 비동기 작업 수행 실패 */
    reject('failure reason');
  }
});

 

프로미스는 Promise 생성자 함수를 통해 인스턴스화한다. Promise 생성자 함수는 비동기 작업을 수행할 콜백 함수를 인자로 전달받는데 이 콜백 함수는 resolve와 reject 함수를 인자로 전달받고 내부에서 비동기 처리 작업을 수행한다.

 

이때 비동기 처리에 성공하면 resolve 메소드를 호출하고,

만약 비동기 처리에 실패하면 reject 메소드를 호출해 각각의 처리 결과는 promise 객체의 후속 처리 메소드로 전달된다.

비동기 처리 성공시 프로미스는 fulfilled 상태가 되고, 실패 시 rejected 상태가 된다.

이처럼 프로미스의 상태는 resolve 또는 reject 함수를 호출하는 것으로 결정된다. 

프로미스는 비동기 처리 상태와 처리 결과를 관리하는 객체다.

 

 

프로미스 체이닝

비동기 처리를 위한 콜백 패턴은 콜백 헬이 발생하는 문제가 있다.

프로미스는 then, catch, finally 후속 처리 메서드를 통해 콜백 헬을 해결한다.

 

 

   const url = 'http://jsonplaceholder.typicode.com/posts';

    // 포스트 id가 1인 포스트를 검색하고 프로미스를 반환한다.
    promiseAjax('GET', `${url}/1`)
      // 포스트 id가 1인 포스트를 작성한 사용자의 아이디로 작성된 모든 포스트를 검색하고 프로미스를 반환한다.
      .then(res => promiseAjax('GET', `${url}?userId=${JSON.parse(res).userId}`))
      .then(JSON.parse)
      .then(render)
      .catch(console.error);

 

후속 처리 메서드는 언제나 콜백함수를 반환한 프로미스를 반환하므로 연속적으로 호출할 수 있다.

이를 프로미스 체이닝이라 한다.

 

프로미스는 프로미스 체이닝을 통해 비동기 처리 결과를 전달받아 후속 처리를 하므로 비동기 처리를 위한 콜백 패턴에서 발생한 콜백 헬이 발생하지 않는다. 그러나 콜백 패턴을 사용하므로 콜백 함수를 사용하지 않는 것은 아니다.

콜백 패턴은 가독성이 좋지 않은데 이는 ES8에서 도입한 async/await를 통해 해결할 수 있다. 

async/await를 사용하면 프로미스의 후속 처리 메서드 없이 동기 처리 처럼 프로미스가 처리 결과를 반환한다.

 

 

fetch

HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API다. 

프로미스를 지원하고 대부분의 모던 브라우저에서 제공한다.

fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환한다.

첫번째 함수로 HTTP 요청을 전송할 URL을 전달하면 GET 요청을 전송한다.

후속처리메서드 then을 통해 프로미스가 resolve한 Response 객체(HTTP 응답을 나타내는 다한 프로퍼티)를 전달 받을 수 있다.

 

fetch('https://jsonplaceholder.typicode.com/todos/1')
	// response는 HTTP응답을 나타내는 Response 객체
    // json 메서드를 사용하여 Response 객체에서 HTTP 응답 몸체를 취득하여 역직렬화
.then(response => response.json())
	// json은 역직렬화된 HTTP 응답 몸체
.then(json => console.log(json));
	// {userId: 1, id:1, completed:false}
;

 

 

axios

 

node.js와 브라우저를 위한 Promise기반의 HTTP통신 라이브러리이다.

비동기로 HTTP 통신을 가능하게 해주며 return을 Promise 객체로 해주기 때문에 response 데이터를 다루기도 쉽다.

 

axios({
  url: 'https://test/api/cafe/list/today', // 통신할 웹문서
  method: 'get', // 통신할 방식
  data: { // 인자로 보낼 데이터
    foo: 'diary'
  }
});

 

 

 

 

 

axios vs fetch

axios	fetch
써드파티 라이브러리로 설치가 필요	현대 브라우저에 빌트인이라 설치 필요 없음
XSRF 보호를 해준다.	별도 보호 없음
data 속성을 사용	body 속성을 사용
data는 object를 포함한다	body는 문자열화 되어있다
status가 200이고 statusText가 ‘OK’이면 성공이다	응답객체가 ok 속성을 포함하면 성공이다
자동으로 JSON데이터 형식으로 변환된다	.json()메서드를 사용해야 한다.
요청을 취소할 수 있고 타임아웃을 걸 수 있다.	해당 기능 존재 하지않음
HTTP 요청을 가로챌수 있음	기본적으로 제공하지 않음
download진행에 대해 기본적인 지원을 함	지원하지 않음
좀더 많은 브라우저에 지원됨	Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원

 

axios는 별도의 설치가 필요하다는 단점이 있지만 그것을 커버할 만한 fetch 보다 많은 기능 지원과 문법이 조금이나마 간소화 된다는 장점이 있다는 것을 볼 수 있다.

간단하게 사용할때는 fetch를 쓰고, 이외의 확장성을 염두해봤을 땐 axios를 쓰면 좋다고 보면 된다.

 

 

 

 

참고

https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

https://poiemaweb.com/js-ajax