axios vs. fetch

Fetch API

• 네이티브 브라우저 API로 Node.js 프로젝트에 라이브러리를 설치할 필요가 없습니다.
• 클라이언트는 요청의 데이터를 JSON으로 변환하여 전송해야 합니다.
• 응답에 404 또는 500 예외가 있어도 예외를 발생시키지 않습니다.
• 응답 상태를 명시적으로 확인해야 합니다.
• response.json() 프로미스를 resolve 하여 응답 데이터를 가져옵니다. Fetch API는 Internet Explorer를 제외한 모든 브라우저를 지원합니다.

예시 코드:

 

//sends data using fetch api.
async function getUserInfoFetch()
{
    try
    {
        let userInfo = await fetch('https://jsonplaceholder.typicode.com/posts/1');

        if (userInfo.status == 404 || userInfo.status == 500)//explicit checking for 404 and 500 etc.
        {
            throw new Error(userInfo.statusText);
        }
        userInfo = await userInfo.json();//resolving promise.

        console.log(userInfo);//readin data.

    } catch (error)
    {
        console.log(error)
    }
}

 

2. Axios

• node 패키지로 node.js 프로젝트에서 설치하여 사용할 수 있습니다.
• 자동으로 데이터를 JSON으로 변환하여 요청을 보냅니다.
• 응답에 404 또는 500 상태 코드가 있으면 Promise를 reject 합니다.
• response.data에서 데이터를 가져올 수 있습니다.
• 모든 브라우저를 지원합니다.

 

예시 코드:

 

const axios = require('axios');

//function that sends http request using axios.
async function getUserInfoAxios()
{
    try
    {
        let userInfo = await axios.get('https://jsonplaceholder.typicode.com/posts/10');

        //reading the response by data property
        console.log(userInfo.data);
    } catch (error)
    {
        console.error(error)
        //console.error(error)
    }
}