[React] axios vs fetch / axios fetch 차이 / axios fetch 차이점

 

 

 

axiso

Axios 는 브라우저, Node.js 를 위한 Promise API 를 활용하는 HTTP 비동기 통신 라이브러리(return 을 promise 객체로 해주기 때문에, response 데이터를 다루기 쉬운 장점)

axios 특징

• 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
• Promise(ES6) API 사용
• 요청과 응답 데이터의 변형
• HTTP 요청 취소
• HTTP 요청과 응답을 JSON 형태로 자동 변경

axios 기초문법

/* axios 파라미터 문법 예시 */

axios({
    method: "get", // 통신 방식(GET/POST)
    url: "www.google.com", // 서버
    headers: {'X-Requested-With': 'XMLHttpRequest'} // 요청 헤더 설정
    params: { name: "ooweat", blog: "tistory" }, // ?파라미터를 전달
    responseType: 'json', // default
    
    maxContentLength: 2000, // http 응답 내용의 max 사이즈
    validateStatus: function (status) {
      return status >= 200 && status < 300; // default
    }, // HTTP응답 상태 코드에 대해 promise의 반환 값이 resolve 또는 reject 할지 지정
    proxy: {
      host: '127.0.0.1',
      port: 3100,
      auth: {
        username: 'ooweat',
        password: '1234'
      }
    }, // proxy서버의 hostname과 port를 정의
    maxRedirects: 5, // node.js에서 사용되는 리다이렉트 최대치를 지정
    httpsAgent: new https.Agent({ keepAlive: true }), // node.js에서 https를 요청을 할때 사용자 정의 agent를 정의
})
.then(function (response) {
	console.log(response.data)
    // response Action
});

axios 응용문법

const API =axios.create({
    baseURL: `http://localhost:8080/`,    
    timeout: 30000,
    headers: {
        "Content-Type" : `application/json;charset=UTF-8`,
        "Access-Control-Allow-Origin": "*",
        "Accept": "application/json",
    }
});

let [resData, setTotAmt] = useState({
        totAmount : 0,
})

API.post("/common/test", reqData)

 

 

fetch

Javascript 에서 기본적으로 제공하는 기능으로, Promise 기반으로 구성되어 있어 axios 가 등장하기 전, 비동기 처리 프로그래밍 개발 시, 필수적으로 사용하는 기능이다.

 

fetch 는 똑같은 코드가 반복되는 경우가 많기 때문에, 모듈화를 통해 따로 선언해놓고 변수를 할당하는 것이 편의성이 용이하다.

 

async function post(host, path, body, headers = {}) {
  const url = `https://${host}/${path}`;
  const options = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      ...headers,
    },
    body: JSON.stringify(body),
  };
  const res = await fetch(url, options);
  const data = await res.json();
  if (res.ok) {
    return data;
  } else {
    throw Error(data);
  }
}

//사용 시, 
post("news.naver.com", "posts", {
  title: "날씨",
  body: "화창",
  contentSeq: 1049,
})
  .then((data) => console.log(data))
  .catch((error) => console.log(error));

fetch 기초 문법

fetch("https://news.naver.com", {
  method: "POST", // GET(Default), POST, PUT(전체수정), PATCH(일부수정), DELETE(삭제)
  headers: { // 헤더 조작
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ // 자바스크립트 객체를 json화 한다.
    title: "날씨",
    body: "화창한 봄날!",
    contentSeq: 1049,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))

 

fetch 응용 문법

fetch(myRequest)
  .then(response => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error('Something went wrong on api server!');
    }
  })
  .then(response => {
    console.debug(response);
    // ...
  }).catch(error => {
    console.error(error);
  });

#Index.jsx
import React, {useEffect, useState} from "react";
import API from '../util/api.js';
import {useParams} from "react-router-dom";
import Loader from "../component/loader";

useEffect(() => {
        async function callAPI() {
            const res = await API.post("/common/info", reqData)
            console.log(res.data)
            setResData(res.data)
            setLoading(false)
        }

        setLoading(true)
        callAPI().then(r => console.log("Connected"))
    }, []);

 

axios vs fetch 의 차이점

axios	fetch
3rd Party lib 로 설치가 필요	현대 브라우저에 빌트인이라 설치 필요 없음
XSRF 보호를 해준다.	별도 보호 없음
data 속성을 사용	body 속성을 사용
data는 object를 포함한다	body는 문자열화
status가 200이고 statusText가 ‘OK’이면 성공이다	응답객체가 ok 속성을 포함하면 성공이다
JSON데이터 형식으로 자동변환	.json()메서드 선언 필요
요청을 취소할 수 있고 타임아웃이 가능하다.	해당 기능 존재 하지않음
HTTP 요청을 가로챌수 있음	기본적으로 제공하지 않음
Download 진행에 대해 기본적인 지원을 함	지원하지 않음
대부분의 브라우저를 지원함	Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원

 

---

---