Javascript에서 Fetch와 Axios 비교

안녕 ! 👋 이번 블로그에서는 Fetch API와 Axios를 이용하여 API를 구현하는 방법을 알아보겠습니다.

시작하기 전에 이 자습서에 필요한 유일한 전제 조건은 javascript에 대한 기본적인 이해입니다.

목차

What is fetch?

Syntax of fetch

What is axios?

Syntax for axios

Key differences b/w fetch and axios

페치란 무엇입니까?

가져오기는 웹 애플리케이션의 서버에 비동기 API 호출을 보내는 표준 방법입니다. ECMASCRIPT6(ES6)의 기능이며 2015년에 다시 소개되었습니다.
Fetch API는 window 객체에 정의된 fetch()라는 메서드를 제공합니다. 엔드포인트(리소스)의 URL인 인수가 필요합니다. 이 메서드는 응답을 검색하기 위해 해결된 약속을 반환합니다.

끝점에서 일부 데이터를 가져오는 예를 살펴보겠습니다.

const fetchNames = ()=>{
   fetch("https://localhost:5000/api/names/")
      .then((res)=> res.json()) // successful req, change to json
      .then((data)=>{
       console.log(data); // data contains the json object
    })
     .catch(error=>{
       console.log(error); // something went wrong
    })
}

Note that, for Post request we also need to include the options
For example, we are sending a name with id to the server

const sendName=()=>{
    fetch("http://localhost:5000/api/user/", {
       // the method type 
       method : 'POST',
       // contents to send i.e., the body
       body: JSON.stringify({
        name : 'David',
        id:"1"
       }),
       // headers of the request
       headers:{
        'Content-type':'Application/json'  
       }
      })
      .then( res => res.json())
      .then( data=> console.log(data))
      .catch(error => console.log(error))
}

따라서 가져오기가 어떻게 작동하는지 알고 있습니다. 이제 액시오스를 보자.

액시오스가 무엇인가요?

Axios는 노드 js(javascript의 런타임) 또는 브라우저의 XMLHttpRequests(XHR)에서 HTTP 요청을 만드는 데 사용되는 자바스크립트 라이브러리입니다. 이것 역시 ES6에 기본 제공되는 Promise API를 지원합니다.

axios를 사용하여 데이터를 가져오고 데이터를 게시하는 방법을 보여주는 예

 // get request
  const fetchNames = async()=>{
   // we are using asynchronous function so we need to await for 
   the req to be processed
   try{
     const response = await 
     axios.get('http://localhost:5000/api/names/');
     console.log(response.data)
   }catch(error){
      console.log(error);
  }
}

// post request
const postName = async()=>{
   // same as previous
   try{
      const response = await 
       axios.post('http://localhost:5000/api/users/',{
          name:'David',
          id:1
     });
     // log the data from the response 
      console.log(response.data);
   }catch(error){
     console.log(error); // something went wrong!
     }
}

페치와 액시오스의 주요 차이점

술책
악시오스


Fetch는 대부분의 최신 웹 브라우저에 내장되어 있으므로 설치할 필요가 없습니다.
Axios는 설치가 필요한 독립 실행형 타사 패키지(라이브러리)입니다.

가져오기의 요청 개체에 URL이 없습니다.
Axios는 요청 객체에 URL이 있습니다.

XSRF(교차 사이트 요청 위조) 보호 기능이 없습니다.
XSRF 보호 기능이 내장되어 있습니다.

요청이 이루어지면 응답이 json으로 변환됩니다.
여기에서 응답은 자동으로 json으로 변환됩니다.

요청에는 문자열로 변환되는 본문이 있습니다.
요청에는 개체 자체를 포함하는 데이터가 있습니다.

요청을 중단할 수 없습니다.
요청 취소에 대한 요청 제한 시간이 있습니다.



바라건대, 서버에 대한 API 호출 방법을 지울 수 있었습니다. 이해했다면 다른 사람들이 혜택을 볼 수 있도록 게시물에 좋아요를 누르고 댓글을 달고 공유하세요.
여기까지 읽어주셔서 감사합니다! 계속 개발하세요! ❤❤