[JavaScript] 비동기 처리를 위한 Fetch 와 Axios 를 동시에 알아보기

JavaScript

[JavaScript] 비동기 처리를 위한 Fetch 와 Axios 를 동시에 알아보기

joheamin 2025. 2. 11. 22:48

🔷 Fetch

❓Fetch란?

자바스크립트에서 비동기적으로 HTTP요청을 수행하기 위한 최신 API로
XHR 보다 더욱 간결하고 효율적인 기능을 제공한다.

Promise를 기반으로 하여 then 또는 async/await 사용 가능하다
Response를 두 번에 나눠 받으며 , Json으로 변환은 직접 해주어야한다.

❓ Fetch를 사용하는 이유

Fetch는 브라우저가 기본으로 제공하는 API 이기 때문에 간편하게 사용할 수 있으며
간단한 네트워크 요청의 경우 가벼운 코드로 활용이 가능하다.

✏️ Fetch 기본 구조

fetch("요청 보낼 서버의 url")
	.then((response1) => {
		//첫번째 response 처리
    }).then(response2) => {
		//두번째 response 처리    		
    }).catch((error)=>{
    	//실패 시 catch 실행
    })

👉 fetch는 response를 두 번에 나눠서 받으며

첫번째에서는 응답을 받고 두번째에서는 응답 데이터를 출력

실패 시 catch문 실행

🔷 Fetch 활용하기

1️⃣ 함수 실행 버튼 생성

  <body>
    <h1>페이지를 불러오기 전 입니다.</h1>
    <button onclick="test()">start</button>
    
    <div id="test"></div>
  </body>
👉 응답 데이터를 출력하기 위한 div 태그까지 생성

2️⃣ fetch 생성

1. 응답을 받을 then 생성
response.ok : 응답 성공 여부를 반환
   function test() {
      fetch("test.html")
        .then((response) => {
          if (response.ok) return response.text();
          else throw new Error("실패");
        })
    }
👉 응답에 성공할 경우 해당 실행 문서의 text를 반환하고 실패할 경우 에러를 발생시켜 catch로 전달

2. 응답 데이터를 출력할 then 생성
    function test() {
      fetch("ex01_Error.html")
        .then((response) => {
          if (response.ok) return response.text();
          else throw new Error("실패");
        })
        .then((response) => {
          document.getElementById("test").innerHTML = response;
        })
    }
👉 전달 받은 데이터를 지정한 위치에 출력

3. 실패할 경우 처리를 위한 catch 생성
    function test() {
      fetch("ex01_Error.html")
        .then((response) => {
          if (response.ok) return response.text();
          else throw new Error("실패");
        })
        .then((responseJson) => {
          document.getElementById("test").innerHTML = responseJson;
        })
        .catch((error) => {
          console.log(error);
        });
    }
👉 실패 시 에러 메시지 콘솔 출력

✔️ 결과

성공

---------------------------------

실패

🔷 Axios

❓Axios란?

자바스크립트에서 비동기적으로 처리 하기위한 HTTP 통신 라이브러리로
Promise과 XHR을 기반으로 하여 두 방식의 장점을 모두 가지고 있다.

Response를 한 번에 받아오며 요청과 응답을 Json형태로 자동으로 처리해준다.

❓ Axios를 사용하는 이유

Axios는 외부 라이브러리이기 때문에 별도로 설치해야된다는 단점이 있지만
Fetch보다 사용이 훨씬 편리하고 기능이 많다는 장점이있으며 Json으로 자동 변환된다는 이점이 있다.

그리고 요청 취소나 타임아웃등 여러 기능이 필요할 때 사용하면 좋다.

✏️ Axios 기본 구조

axios
	//(get/post/put/delete)
	.요청 보내는 방식("요청할 문서")
    .then((response)=>{
    	//JSON 형태로 자동 변환되어 반환
    })
    .catch((error)=>{
    	//문제 발생 시 자동으로 catch 실행
    })

🔷 Axios 활용하기

1️⃣ 함수 실행 버튼 생성

  <body>
    <h1>페이지를 불러오기 전 입니다.</h1>
    <button onclick="test()">start</button>
    
    <div id="test"></div>
  </body>
👉 응답 데이터를 출력하기 위한 div 태그까지 생성

2️⃣ fetch 생성

1. 전송 방식과 url 을 전달하고 then으로 받기

        axios
          .get("test.html")
         .then((response) => {
            document.getElementById("test")
            	.innerHTML = `** 서버 Response 성공 axios =><br> ${response.data}`;
      })
      } //axTest

👉 응답은 자동 JSON 변환되어 반환

2. 에러 발생 시 실행할 catch문

        axios
          .get("test.html")
         .then((response) => {
            document.getElementById("test")
            	.innerHTML = `** 서버 Response 성공 axios =><br> ${response.data}`;
      }).catch(({ response, message }) => {
            //=> 객체 구조분해 적용
            //   err.response , err.message 등
            document.getElementById(
              "resultArea"
            ).innerHTML = `** 서버 Response 실패 axios => <br> 
           err.response = ${response} <br> 
           err.response.status = ${response.status} <br> 
           err.response.headers = ${response.headers} <br> 
           err.message = ${message} `;
          });
      } //axTest

👉 response를 구조분해하여 에러 메시지 출력

'JavaScript' 카테고리의 다른 글

[JavaScript] Promise와 Ajax를 활용한 비동기 통신 (2)	2025.02.11
[JavaScript] Ajax 에 대해 알아보고 활용하기 (2)	2025.02.10
[JavaScript] JavaScript는 동기적 처리? 비동기적 처리? (4)	2025.02.08
[JavaScript] 배열 메서드에 대해 알아보기(Map,Filter,Reduce,Find,ForEach) (2)	2025.02.05
[JavaScript] Arguments 와 나머지 매개변수에 차이에 대해 알아보자 (3)	2025.02.04

현재글[JavaScript] 비동기 처리를 위한 Fetch 와 Axios 를 동시에 알아보기

해민

기록하는 프로그래밍

MySQL, axios, 동기, var, useState, react, Spring, Let, 리액트, 어노테이션, database, UI, 호이스팅, javascript, 비동기, useEffect, 컴포넌트, java, map, const,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

해민