Fetch API 란 ? AJAX 기술 이해하기

 

 

 

나는 그동안 XMLHttpRequest 만 사용해왔다.

이번 정리를 통해 최신 API 기술( fetch(), axios)에 대해 확실하게 알고 넘어아가자!

 

 

 

AJAX(Asynchronous JavaScript And XML) 란 ? 

 

페이지 새로고침 없이 서버와 비동기적으로 데이터를 주고 받는 기술 방식
웹페이지를 "부분적으로 업데이트" 할 수 있는 방법임 

 

 

[ 구현 방식 ]

 

구현 방식	설명
XMLHttpRequest (XHR)	예전 방식. 콜백 기반. 복잡함.
jQuery $.ajax()	XHR을 jQuery로 감싼 것. 쓰기 쉬움.
Fetch API	최신 표준. Promise 기반. 깔끔하고 가독성 좋음.
Axios	Fetch를 더 편하게 만든 라이브러리. 자동 JSON 변환, 에러처리 등 좋음

 

 

 

 

Fetch API  란 ? 

 

브라우저에서 서버랑 HTTP 통신할 수 있게 해주는 기능 

 

 

[ 특징 ]

• ES6 이후 등장 (기존 XMLHttpRequest 보다 간단함 )  
• Promise 기반 ( 비동기 처리를 편하게 함 )
• 요청 방식( method), 헤더(header), 본문(body) 등 세팅 가능
• 기본적으로 CORS 정책 따라감 

 

Promise 란 ? 
: 비동기 작업의 결과를 나타내는 객체 

# Promise 의 3가지 상태 값
- pending : 대기
- fulfilled : 완료
- rejected : 실패

 

 

 

 

fetch()  함수만 사용한 사용 예시 

 

fetch() 함수 

-> Fetch API 의 핵심 

 

fetch() 함수로 데이터를 요청하면 결과를 즉시 주지않고 Promise 객체를 반환한다.

 

 

1. fetch() 요청 성공 예시 

 

CORS 가 허용된 Fack API 를 활용하여 테스트 해보자 

 

# fetch() 함수로 데이터 요청 (GET) 

const result = fetch('https://jsonplaceholder.typicode.com/posts/1');
console.log(result)

 

# 응답 

 

요청에 성공하면 다음과 같이 "fulfilled" 된 Promise  상태를 반환한다. 

 

 

 

 

2)  fetch() 요청 실패 예시 

 

+) CORS 가 허용되지 않은 API 요청 

 

예를 들어 내 tistory 주소('https://megak.tistory.com/')에 API 요청을 하면 다음과 같은 에러가 발생한다. 

 

 

 

이 외에도 fetch() 요청 실패 이유는 다양할 것이다. 

 

 

CORS(Cross-Origin Resource Sharing)
: 서로 다른 출처(origin)끼리 데이터를 주고받을 때 브라우저가 보안상 막는 정책

ex) 위의 예시로 http://localhost ~ 에서 https://megak.tistory~ 로 요청을 보냈기 때문에 CORS 발생! 

 

 

 

[ 핵심 ]

fetch() 함수는 바로 결과가 나오지 않고 Promise 상태로 나오기 때문에 결과를 사용하려면.tneh() 이나 await 사용해야한다 

 

 

 

fetch() 함수 결과 데이터 사용 예시 -  .then() 

 

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(data => {
    // 받아온 데이터를 활용
    document.body.innerHTML += `
      <h2>title : ${data.title}</h2>
      <p>body : ${data.body}</p>
    `;
  })
  .catch(err => console.error('에러:', err));

 

 

# 결과 

html 화면

 

 

다음과 같이 .then() 함수를 사용하여 응답을 json 데이터로 받아서 화면에 뿌려줄 수 있다. 

 

 

fetch() 함수 결과 데이터 사용 예시 - async + await 

 

 

async 개념 

• 함수 앞에 async 를 붙이면 그 함수는 무조건 Promise 객체를 반환
• await 을 쓸 수 있게 해주는 문법적 키워드 

 

# aync 사용 예시 

async function test() {
  return 123;
}

console.log(test());

 

# 응답 결과

 

 

await 개념 

• Promise 가 끝날 때 까지 기다렸다가 다음 줄 실행
• await 은 오직 async 함수 안에서만 사용 가능함
• await fetch() -> fetch() 의 Promise가 끝날 때까지 대기 

 

# await 사용 예시

async function getData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1'); // 서버 응답 기다림
    const data = await response.json(); // JSON 파싱 기다림
    console.log(data);
  } catch (err) {
    console.error('에러 발생:', err);
  }
}

 

 

[ 핵심 ]

 

다음과 같이 async/await 을 쓰면 비동기 처리를 깔끔하게 처리할 수 있다. 

 

 

---

 

[ 개념 요약  정리 ]

용어	정의
fetch()	서버에 HTTP 요청 보내는 함수, Promise 반환함	Fetch API
Promise	미래에 결과가 올 수도 있는 값. .then() 또는 await로 결과 받음
async	함수가 항상 Promise 반환하게 만듦. await 사용 가능	JS 문법
await	Promise가 끝날 때까지 기다림. 다음 줄은 그 이후 실행됨	JS 문법

 

---

 

AXIOS 란 ? 

JavaScript 에서 HTTP 요청을 보낼 수 있게 해주는 라이브러리

주로 브라우저(프론트엔드) 또는 Node.js(백엔드) 환경에서 많이 사용

 

fetch() 보다 좀 더 편리하고 직관적인 기능을 제공함 

ex) 응답 자동 JSON 파싱, 요청 취소, 인터셉터 등 

 

 

# 설치 

npm install axios

 

 

axios() 함수 결과 데이터 사용 예시 -  .then() 

axios.get('https://jsonplaceholder.typicode.com/posts/1')
	.then(response => {
    	console.log(response.data) // 자동 JSON 파싱
    })
    .catch(error => {
    	console.error(error);
    });

 

 

 

 

axios() 함수 결과 데이터 사용 예시 - async + await 

async function getPost() {
	try {
    	const response = await.axios.get('https://jsonplaceholder.typicode.com/posts/1')
        console.log(response.data) // JSON 자동 처리
    } catch (error) {
    	console.log(error)
    }
}

getPost();

 

 

 

 

fetch와 axios 주요 차이점

 

항목	fetch	axios
지원	브라우저 기본	외부 라이브러리 설치 필요 (npm i axios)
기본 응답 처리	res.json() 직접 파싱해야 함	자동으로 JSON 파싱됨 (res.data)
에러 처리	HTTP 400, 500도 성공으로 처리됨	HTTP 에러 자동 처리 (catch 됨)
요청 취소	복잡 (AbortController 사용)	CancelToken 지원, 좀 더 쉬움
인터셉터 지원	❌ 없음	✅ 요청/응답 가로채기 가능 (token 처리 등)
타임아웃 설정	❌ 없음	✅ 있음 (timeout: 3000)
브라우저 지원	IE 지원 ❌	구버전 브라우저 일부 대응 가능

 

 

상황에 따라 선택해서 사용 
- 간단한 요청 작성의 경우 -> fetch
- 실무에서 자주 사용 ( 다양한 기능 때문 ) -> axios 

 

 

---

 

 

XMLHttpRequest 란 ? 

브라우저에서 서버랑 비동기 통신을 하기 위한 API 

 

• Ajax(비동기 요청)의 핵심 도구였고, 지금도 돌아는 가지만 예전에 사용하던  API 임
• 문법이 지저분하고 복잡해서 지금은 fetch() 가 대체로 나왔음

 

 

# 사용 예시 

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');
xhr.onreadystatechange = function () {
	if (xhr.readyState === 4 && xhr.status === 200) {
    	const data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();

 

 

대략 이런식으로 사용하는데 상태 코드도 수동으로 체크해야하고 Promise를 지원하지 않아 비동기 콜백지옥이 발생하기 쉽다 !! 

 

콜백 지옥 (Callback Hell)이란?

비동기 함수 안에 또 비동기 호출 → 계속 중첩됨 코드 읽기 어려움, 유지보수 지옥 XHR 또는 $.ajax() 같은 콜백 기반 방식에서 자주 발생함

해결법:
Promise 사용 async/await 사용

 

 

 

 

$.ajax() 

 

jQuery 에서 제공하는 AJAX 메서드

• 내부적으로는 XMLHttpRequest 사용함
• fetch() 나오기 전엔 jQuery로 AJAX 날리는 게 대세였음

 

# 사용 예시 

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/posts/1',
  method: 'GET',
  success: function(data) {
    console.log(data); // 응답이 오면 실행되는 콜백
  },
  error: function(err) {
    console.error('에러남:', err);
  }
});

 

내가 맨날 쓰던 방식 

 

 

 

 

+ )

추가적으로 , ajax 요청을 보낼 때 async=false 조건을 주면 동기로 사용할 수 있었다.

이때 비동기와 동기의 차이점은 무엇일까? 

아래 포스트에서는 동기/비동기 호출에 대한 개념과 비동기 호출시 콜백지옥에 빠지는 예시를 다뤄보았다.

 

2025.04.09 - [분류 전체보기] - JavaScript 의 동기/비동기 호출 이해하기

JavaScript 의 동기/비동기 호출 이해하기

 

 

---

 

 

 

[ 출처 ]

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API