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

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

Promise

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

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

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

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

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

Fetch

문법

// 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

설치

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

axios