[ Javascript ] Ajax : fetch & axios API

Da-hye·2021년 4월 27일

JavaScript

목록 보기

3/4

Ajax 란?

(Asynchronous Javascript And Xml)
Javascript를 이용한 비동기 통신 기술로, 클라이언트와 서버 사이에서 전체 페이지를 리로드 할 필요 없이, 필요한 데이터만 로드 할 수 있다.

💡 Ajax는 JSON, XML, HTML, txt 등 다양한 형태의 데이터를 주고 받을 수 있다.

💡 Ajax를 구현할 수 있는 기술들 중 최신 기술인 Fetch(), Axios() 에 대해 알아보도록 한다.

Fetch(), Axios() API 모두 Javascript 라이브러리로, Promise 기반의 비동기 통신 기술이다.
( = Promise 객체 형태로 return 한다. )

1. fetch

import 하지 않아도 사용 가능하다.
지원하지 않는 브라우저가 있다.
네트워크 에러가 발생했을 때 기다려야 한다.
( reponse timeout API을 제공하지 않음 )

1-1. fetch를 이용해보자!

fetch(url, options)
	.then((response) => console.log("response:", response))
    	.catch((error) => console.log("error:", error))

첫번째 인자인 url을 통해 API를 호출한다. 반환된 Promise 타입의 객체는 호출의 성공 여부에 따라 응답 객체(response) 또는 예외 객체(error)를 resolve, reject한다.

🔎 옵션(options) 객체 : HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정 가능하다.

예제
다음은 JSONPlaceholder에서 fetch를 이용하여 free API를 호출하는 코드이다.

🔎 가져오려는 데이터의 형태

 {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
 }

🔎 (7-11번째줄)

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => res.json())
  .then(json => {
  	setTodos(data);
  	setLoading(false);
  });

간단히 설명하자면, url에 존재하는 JSON 형태의 데이터를 성공적으로 가져오면 첫번째 .then을 실행한다. 데이터를 JSON 형태로 파싱한 후, 파싱된 데이터는 두번째 .then의 실행으로 인해 todos 변수에 저장된다.

실제 결과를 확인하면 아래와 같다.

💭 예제 실행 시 해결한 issue
가져오려는 데이터의 타입과 변수의 타입을 올바르게 지정하지 않으면 오류가 발생한다. 위 예제에서 여러개의 object가 담긴 array를 가져오는 것을 제대로 알아보지 않고 하나의 array를 가져오는 거라 생각해서 문제가 발생했었다.