JavaScript fetch와 axios 사용법

Fetch

비동기 HTTP 통신으로 클라이언트에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 Web API

 

장점

• 브라우저에서 기본적으로 제공되는 API이므로 추가적인 라이브러리나 의존성 없이 사용 가능
• Promise 기반

단점

• 브라우저 호환성 문제
• axios에 비해 기능 부족
  • HTTP 에러 처리, 요청 취소 기능 등등
• nodejs 환경에서 사용 불가

 

기본 구조

fetch(url, options)
	.then((response) => console.log(response));

옵션(options)에 들어갈 중요 속성

• method : HTTP 요청 메서드 (GET, POST, PUT, DELETE 등)
  
  • 기본값은 GET
• headers : HTTP 요청 헤더
  • 객체나 String 값들을 가진 객체 리터럴로 제공
• body : HTTP 요청에 추가하고자 하는 본문

 

fetch는 api 요청 시 Response 객체를 반환한다.

 

response 중요 속성 및 메서드

• response.status – HTTP 상태 코드
• response.ok - 응답의 성공 여부를 boolean값으로 나타냄
  • HTTP 상태 코드가 200과 299 사이일 경우 true
• response.text() – 응답을 텍스트를 반환
• response.json() – 응답을 JSON 형태로 파싱한 결과로 반환
• response.formData() – 응답을 FormData 객체 형태로 반환

 

get 방식

 

예시 코드

fetch(url) // fetch는 get 방식이 기본으로 작동, options 생략 가능
  .then((response) => {
    return response.json(); // 응답을 JSON 형태로 파싱한 결과로 반환
  })
  .then((data) => {
    console.log(data); // 결과 출력
  })
  .catch((error) => {
    console.error('오류 발생:', error);
  });

 

post 방식

 

예시 코드

// 보낼 데이터
const dataToSend = {
  title: '제목',
  body: '내용',
  userId: 1,
};

// POST 요청 보내기
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(dataToSend),
  // js 객체를 json으로 변경
  // body의 데이터 유형은 반드시 "Content-Type" 헤더와 일치해야 함
})
  .then((response) => {
    return response.json(); // 응답을 JSON 형태로 파싱한 결과로 반환
  })
  .then((data) => {
    console.log(data); // 결과 출력
  })
  .catch((error) => {
    console.error('오류 발생:', error);
  });

 

Axios

비동기 HTTP 통신으로 클라이언트에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 라이브러리

 

장점

• 브라우저 호환성이 뛰어남
• Promise 기반
• 브라우저와 nodejs 환경에서 사용 가능

단점

• 모듈 설치 or 호출을 해줘야 사용이 가능

 

axios 설치

npm install axios

axios CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 

기본 구조

axios({
  url: '/user?ID=12345',
  method: 'get',
}).then((response) => {
  console.log(response.data); // 서버가 제공하는 응답(데이터)
  console.log(response.status); // HTTP 상태 코드
  console.log(response.statusText); // HTTP 상태 메시지
  console.log(response.headers); // HTTP 헤더
  console.log(response.config); // 요청을 위해 'Axios'가 제공하는 구성
});

 

get 방식

 

예시 코드

// 방법 1
axios({
  url: '', // 통신하고자 하는 주소
  method: 'get', // HTTP 요청 메서드
  params: { query: '검색어' },
  // URL 파라미터
  // {key: value, key: value}로 작성
  // params 객체 대신 URL에 쿼리스트링과 함께 보낼 수 있음
})
  .then((response) => {
    return response.data;
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('오류 발생:', error);
  });


// 방법 2
const options = {
  params: {
    query: '검색어',
  },
};

axios
  .get('url', options)
  .then((response) => {
    return response.data;
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('오류 발생:', error);
  });

 

post 방식

 

예시 코드

// 방법 1
axios({
  url: '', // 통신하고자 하는 주소
  method: 'post', // HTTP 요청 메서드
  data: { userId: 'id', userPw: 'pw' },
  // {key: value, key: value}로 작성
  // method가 put, post, patch 일 때 사용
})
  .then((response) => {
    return response.data;
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('오류 발생:', error);
  });


// 방법 2
const data = {
  userId: 'id',
  userPw: 'pw',
};

axios
  .post('url', data)
  .then((response) => {
    return response.data;
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('오류 발생:', error);
  });

 

실습

카카오 책 검색 Open API 사용해보기

 

카카오 책 검색 공식문서 : https://developers.kakao.com/docs/latest/ko/daum-search/dev-guide#search-book

 

카카오 책 검색 Open API 공식문서 이미지

 

위 이미지를 코드로 정리해보자면 아래와 같이 바꿀 수 있다.

 

fetch 버전

const REST_API_KEY = '발급받은 REST_API_KEY';
const query = `?query=검색어`; // 검색어란에 원하는 값을 넣으면 됨

fetch(`https://dapi.kakao.com/v3/search/book${query}`, {
  method: 'get', // get method는 생략 가능
  headers: {
    Authorization: `KakaoAK ${REST_API_KEY}`,
  },
})
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  });

 

axios 버전

const REST_API_KEY = '발급받은 REST_API_KEY';
const options = {
  headers: {
    Authorization: `KakaoAK ${REST_API_KEY}`,
  },
  params: {
    query: '검색어',
  },
};

axios
  .get('https://dapi.kakao.com/v3/search/book', options)
  .then((response) => {
    return response.data;
  })
  .then((data) => {
    console.log(data);
  });

 

API_KEY 때문에 헷갈리는 경우가 있는데 헤더에 담아서 보내는 경우도 있고, URL 파라미터에 API 키를 같이 담아서 보내는 경우도 있다. 사이트마다 차이가 있는데 해당 사이트 공식문서에서 시키는 대로 하면 된다.