๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ“บ Front End/-- react & redux & nextjs

[React axios] ๋ฆฌ์•กํŠธ axios๋ž€? :: HTTP-API ์—ฐ๋™์„ ์œ„ํ•œ ๋ชจ๋“ˆ (axios vs Fetch API)

by Wonit 2020. 10. 8.

์šฐ๋ฆฌ๊ฐ€ ์ผ๋ฐ˜์ ์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ API๋ฅผ ์—ฐ๋™ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ณดํ†ต fetch-Api๋ฅผ ์‚ฌ์šฉํ•˜๊ณค ํ–ˆ๋‹ค.

 

๋ฆฌ์•กํŠธ ๋˜ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ built-in ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ค‘ ํ•˜๋‚˜์ธ fetch-api๋˜ํ•œ ํ›Œ๋ฅญํ•œ api ์—ฐ๋™ ๋ชจ๋“ˆ์ด๋‹ค.

 

ํ•˜์ง€๋งŒ fetch-api๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ built-in ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ผ๋Š” ํŠน์„ฑ ๋•๋ถ„์ธ์ง€ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์€ React์—์„œ axios๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์„ ํ˜ธํ•œ๋‹ค.

React๋ณด๋‹ค ๋†’์€ axios์˜ npm ๋‹ค์šด๋กœ๋“œ ํ†ต๊ณ„

๋ฆฌ์•กํŠธ์—์„œ fetch api๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์•ˆ๋˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ ์™œ ์‚ฌ๋žŒ๋“ค์€ axios๋ฅผ ์„ ํ˜ธํ• ๊นŒ?

 

์„œ๋กœ ๋น„๊ต๋ฅผ ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ๋ด๋ณด์ž.

axios vs Fetch-api

// fetch

const url = 'http://localhost/test.htm';
const options = {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  body: JSON.stringify({
    a: 10,
    b: 20
  })
};

fetch(url, options)
  .then(response => {
    console.log(response.status);
  });

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

// axios

const options = {
  url: 'http://localhost/test.htm',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    a: 10,
    b: 20
  }
};

axios(options)
  .then(response => {
    console.log(response.status);
  });

๋™์ผํ•œ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๋Š” ์ฝ”๋“œ๊ณ  ๊ฐ„๋‹จํ•œ ์ฝ”๋“œ์ด๋‹ค.

 

์—ฌ๊ธฐ์„œ ๋ณด๋ฉด ์ฐจ์ด์ ์„ ํ•œ ๋ฒˆ ์ฐพ์•„๋ณด์ž.

  • fetch()๋Š” body ํ”„๋กœํผํ‹ฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ , axios๋Š” body ํ”„๋กœํผํ‹ฐ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.
  • fetch์˜ body ๋ถ€๋ถ„์€ stringify() ๋˜์–ด์ง„๋‹ค.
  • fetch์—์„œ๋Š” url์ด fetch()ํ•จ์ˆ˜์˜ ์ธ์ž๋กœ ๋“ค์–ด๊ฐ„๋‹ค.
  • axios์—์„œ url์ด option ๊ฐ์ฒด๋กœ ๋“ค์–ด๊ฐ„๋‹ค.

์—ฌ๊ธฐ์„œ๋Š” ์ฐจ์ด์ ์„ ์ฐพ์„ ์ˆ˜ ์—†์œผ๋‹ˆ ์ข€ ๋” ๋‹ค์–‘ํ•œ ์ด์œ ์—์„œ์˜ ์ฐจ์ด์ ์„ ์ฐพ์•„๋ณด์ž.

  Axios Fetch
ํ˜ธํ™˜์„ฑ IE11๊ณผ ๊ฐ™์ด ์˜ค๋ž˜๋œ ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง€์› ๊ฐ€๋Šฅ Chrome 42+, Firefox 39+๋“ฑ๊ณผ ๊ฐ™์€ ํ•œ์ •๋œ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋งŒ ๊ฐ€๋Šฅ
Response TImeOut ๊ฐ„๋‹จ ๋ณต์žก
Automatic JSON data transform ๊ฐ€๋Šฅ ๋ถˆ๊ฐ€๋Šฅ

๊ฒฐ๋ก 

Axios๋Š” ๋Œ€๋ถ€๋ถ„ HTTP ํ†ต์‹ ์˜ ์š”๊ตฌ์‚ฌํ•ญ์„ ์ปดํŒฉํŠธํ•œ ํŒจํ‚ค์ง€๋กœ์จ ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฝ๊ฒŒ ์„ค๊ณ„๋˜์—ˆ๋‹ค.

 

์œ„์—์„œ ๋ณด์—ฌ์คฌ๋“ฏ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ œ๊ณตํ•˜๋Š” fetch()๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉํ•ด์„œ axios๋ฅผ ์™„๋ฒฝํžˆ ์žฌํ˜„ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ๊ทธ ์‹œ๊ฐ„์„ ๋‹ค๋ฅธ ๊ณณ์— ํˆฌ์žํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค๊ณ ๋“ค ํ•œ๋‹ค.

๊ทธ๋Ÿผ ์ด์ œ ์™œ ์šฐ๋ฆฌ๊ฐ€ axios๋ฅผ ๋ฐฐ์›Œ์•ผ ํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ๊ฐ„๋‹จํ•œ ์„ค๋ช…์ด ๋˜์—ˆ์„ ๊ฒƒ์ด๋ผ ์ƒ๊ฐํ•˜๊ณ  ์ง„์งœ Axios์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž.

Axios

Axios๋ž€ Promise ๊ธฐ๋ฐ˜์˜ HTTP client๋ผ๊ณ  axios ๊ณต์‹ github์— ๊ธฐ์žฌ๋˜์–ด์žˆ๋‹ค.

๋˜ํ•œ axios๋Š” Promise ๊ธฐ๋ฐ˜์ด๊ณ  ์šฐ๋ฆฌ์—๊ฒŒ async/await ์ฝ”๋“œ๋ฅผ ๋งค์šฐ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค.

 

์ด๋Ÿฐ axios๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์šฐ๋ฆฌ์—๊ฒŒ ์ข€ ๋‹ค์–‘ํ•œ ์žฅ์ ๋“ค์„ ์ œ๊ณตํ•ด์ค€๋‹ค.

axios์˜ ์žฅ์ 

  • ์˜ค๋ž˜๋œ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋„ ์ง€์›ํ•œ๋‹ค.
  • ์š”์ •์„ ์ค‘๋‹จํ•  ์ˆ˜ ์žˆ๋‹ค.
  • response timeout์„ ์‰ฝ๊ฒŒ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • CSRF ๋ณดํ˜ธ ๊ธฐ๋Šฅ์ด ๋‚ด์žฅ๋˜์–ด์žˆ๋‹ค.
  • upload progress๋ฅผ ์ง€์›ํ•œ๋‹ค.
  • JSON์„ ์ž๋™์œผ๋กœ ๋ณ€ํ™˜ํ•ด์ค€๋‹ค.

์ด ์™ธ์—๋„ ๋‹ค์–‘ํ•œ ์ด์œ ๊ฐ€ ์žˆ์ง€๋งŒ ํฐ ํŠน์ง•์€ ์ด๋ ‡๋‹ค.

axios๊ฐ€ ์—†์—ˆ๋”๋ผ๋ฉด..

๋‹ค์Œ์‹œ๊ฐ„๋ถ€ํ„ฐ ์ œ๋Œ€๋กœ ๋ฐฐ์›Œ๋ณผ ๊ฒƒ์ด์ง€๋งŒ ์ง€๊ธˆ ๊ฐ„๋‹จํ•˜๊ฒŒ ์–ด๋–ป๊ฒŒ axios๊ฐ€ ์ƒ๊ฒผ๋Š”์ง€ ์•Œ์•„๋ณด์ž.

 

์ผ๋‹จ axios๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๋ฉด ์šฐ๋ฆฌ๋Š” XMLHttpRequest()๋ฅผ ์‚ฌ์šฉํ•ด์„œ open๊ณผ onreadystatechange๋“ฑ์„ ์‚ฌ์šฉํ•ด์„œ ๋ณต์žกํ•œ ์ž‘์—…๋“ค์„ ํ•ด์ค˜์•ผ ํ•œ๋‹ค.

let xhr = new XMLHttpRequest();
xhr.open('GET', 'url', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
      (perform some code);
  } else {
    (handle error)
  }
};
xhr.send();

์šฐ๋ฆฌ๊ฐ€ axios๋ฅผ ๋ชจ๋ฅด๊ณ  ํ†ต์‹ ์„ ํ•œ๋‹ค๋ฉดonreadystatechange๋Š” ๋ฌด์—‡์ด๊ณ , asyncronoseํ•˜๊ฒŒ ์ž‘์—…์„ ํ•  ๋•Œ๋Š” ๋˜ ๋‹ค๋ฅธ ๊ณ ๋ฏผ๋“ค์„ ํ•ด์•ผํ•œ๋‹ค.

 

ํ•˜์ง€๋งŒ ์ด๋Ÿฐ ๋ถˆํŽธํ•จ์„ axios์—์„œ๋Š” ๋งˆ๋ฒ•์ฒ˜๋Ÿผ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ˆ˜ํ–‰ํ•ด์ค€๋‹ค.

axios.get('url')
  .then((response) => {
    console.log(response);
  })
  .catch((response) => {
    console.log(error);
  });

๋˜ post ์ฝ”๋“œ๋ฅผ ๋น„๊ตํ•ด๋ณด์ž.

axios.post( 'url',
  {
    contact: 'James',
    email: 'james.h@gmail.com'
  },
  {
    headers:{
      'Content-type': 'application/json',
      'Accept': 'application/json'
    }
  }
)
  .then((response) => {
    console.log(response.data);
  })
  .catch((response) => {
    console.log('Error!)
  });

์•„๊นŒ get ๋ณด๋‹ค๋Š” ๋ณต์žกํ•˜์ง€๋งŒ ์ด๋ฅผ XMLHttpRequest()๋กœ ๋ฐ”๊ฟ”๋ณด์ž. ์•„์ฃผ ๋ณต์žฅํ„ฐ์ง„๋‹ค.

let xhr = new XMLHttpRequest();

xhr.open('POST', 'url', true);

xhr.setRequestHeader('Content-type', 'application/json');
xhr.setRequestHeader('Accept', 'application/json');
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.response);
  } else {
    (handle error)
  }
};
xhr.send();

์ด์ œ ๋‚˜๋Š” ๋” ์ด์ƒ axios ์—†๋Š” ์„ธ์ƒ์„ ์„ค๋ช…ํ•˜๊ณ ์‹ถ์ง€ ์•Š์•„์กŒ๋‹ค.

 


์ถฉ๋ถ„ํžˆ ์ด์ •๋„๋ฉด ์™œ ์šฐ๋ฆฌ๊ฐ€ axios๋ฅผ ๋ฐฐ์›Œ์•ผ ํ•˜๊ณ  ์‚ฌ์šฉํ•ด์•ผํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ๊ถ๊ธˆ์ฆ๊ณผ ๋ชฉ์ ์„ฑ์ด ํ•ด๊ฒฐ๋˜์—ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

 

์ด์ œ ๋‹ค์Œ ์‹œ๊ฐ„ ๋ถ€ํ„ฐ๋Š” axios๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณผ ๊ฒƒ์ด๊ณ , ์‹ค์ œ๋กœ ๊ณต๊ณต api๋ฅผ ํ†ตํ•ด axios๋ฅผ ์‹ค์ „์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž.

๋Œ“๊ธ€