Promise와 axios, fetch

자바스크립트에서 HTTP Requests를 위한 방법으로는 Fetch 와 axios가 있다.

Fetch 와 axios는 모두 promise 기반의 HTTP 클라이언트로 클라이언트를 이용해 네트워크 요청을 하면 이행(resolve) 혹은 거부(reject) 할 수 있는 promise가 반환 된다.

Promise

Promise는 비동기 처리에 사용되는 객체로 ES6에서 도입되었다.

비동기 처리란 ‘ 특정코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성 ‘ 이다.

Promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스 객체를 생성하게 된다.

비동기 처리 결과로 resole, reject 과 진행 상태로 pending, fulfilled,rejected를 갖는다.

• 대기(pending): 이행하지도, 거부하지도 않은 초기 상태.
• 이행(fulfilled): 연산이 성공적으로 완료됨.
• 거부(rejected): 연산이 실패함.

const promise = new Promise((resolve, reject) => {
  if (condition) { 
    resolve('result');
  } else { 
    reject('failure reason');
  }
});

 

 

Fetch

• ES6부터 들어온 JavaScript 내장 라이브러리

문법

// 1.
async function fetchData() {
  const response = await fetch("http://api"); //디폴트로 GET 방식으로 작동
  const jsonData = await response.json();
  console.log(jsonData);
}

// 2.
fetch("https://api", { method: "GET" })
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

 

GET 이외의 HTTP method를 사용 시

method 옵션을 명시해줘야 하며 headers에는 부가적인 정보가, body에는 POST로 보내는 데이터가 들어간다. headers에 JSON 형식을 사용한다고 알려주고 body의 본문 전체를 JSON 형식으로 바꾸어야 한다.

fetch("http://api", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
	body: JSON.stringify({
    title: "Test",
    body: "testing!",
    userId: 1,
  }),
}).then((response) => console.log(response)

 

 

Axios

• 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

설치

npm install axios
//or
yarn add axios

 

문법

// 1
axios({
    method: 'get',
    url: 'http://api',
  }).then((response) => {
    console.log(response);
});

// 2
axios
    .get('http://localhost:5001/api')
    .then((res) => console.log(res)) 
    .catch((err) => console.log(err));

 

async/await & try...catch

const getData = async() => {
	try {
	  const response = await axios.get('http://api');
		console.log(response)
  } catch (error) {
	  console.error(error);
  }
}

 

header ( Authorization 넣기 )

인증 토큰 (JWT, Bearer 등) 을 서버로 보낼 때 헤더에 넣어서 보낸다.

ex) Authorization: Bearer ${TOKEN}

const postAxios = async () => {
  const { data } = await axios({
    method: 'post,
    url: 'http://api',
    headers: {
      authorization: `Bearer ${token}`
    }
  })
}

 

 

fetch와  axios 차이

fetch

• 라이브러리 설치 X
• JSON 변환 필요
• POST 요청 시 "JSON.stringfy()" 를 사용하여 객체를 문자열 변환
• HTTP 에러 응답 시, promise 거부 x, 네트워크 장애 시에만 거부
• 지원이 안되는 브라우저가 있음
• Fetch 요청을 중단 시키려면 AbortController사용해야 함
• 보안 기능 제공 없음

axios

• 라이브러리 설치 O
• 자동 JSON 변환
• 자동 문자열 변환
• 상태 코드가 범위를 넘어가면 거부
• 다양한 브라우저에서 사용 가능
• Request 취소 / Request TimeOut 설정 가능
• XSRF Protection 보안 기능 제공