๐Ÿ“ฅ XMLHttpRequest&fetch&axios

๊น€์ฒ ์ค€ยท2022๋…„ 1์›” 21์ผ
0

Javascript

๋ชฉ๋ก ๋ณด๊ธฐ
3/16

http ํ†ต์‹ ์„ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” API๋กœ ๋Œ€ํ‘œ์ ์ธ ๋‘ ๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค.
1. XMLHttpRequest
2. fetch
(axios๋Š” ์ด๋“ค์— ๋Œ€ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.)

fetch๊ฐ€ ๋‚˜์˜ค๊ธฐ ์ด์ „์—๋Š” ajax ํ†ต์‹ ์„ ์œ„ํ•˜์—ฌ XMLHttpRequest ๊ฐ์ฒด๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜์—ฌ ๋น„๋™๊ธฐ ํ†ต์‹ ์„ ํ•˜์˜€์ง€๋งŒ fetch API์˜ ๋“ฑ์žฅ์ดํ›„๋กœ promise๊ธฐ๋ฐ˜ ๋ฐ ์‚ฌ์šฉ์˜ ๊ฐ„ํŽธํ•จ ๋ฐ ๊ฐ€๋…์„ฑ ๋“ฑ์˜ ์ด์œ ๋กœ fetch API๊ฐ€ ๋Œ€๋ถ€๋ถ„์˜ ์ ์œ ์œจ์„ ์ฐจ์ง€ํ•˜๊ณ  ์žˆ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด ๋‘ ๊ฐœ์˜ API๋Š” ์–ด๋–ค์ง€ ์‚ดํŽด๋ณด๊ณ  ์–ด๋– ํ•œ ์ฐจ์ด์ ์ด ์žˆ๋‚˜ ์‚ดํŽด๋ณด์ž.
๋˜ํ•œ ์ด๋“ค์— ๋Œ€ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ axios๋Š” ์–ด๋– ํ•œ ์ฐจ์ด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‚˜ ์‚ดํŽด๋ณด์ž.

XMLHttpRequest

XMLHttpRequest ๊ฐ์ฒด๋Š” ajax ๋น„๋™๊ธฐ ํ†ต์‹ ์„ ์œ„ํ•ด ์‚ฌ์šฉ๋œ๋‹ค.
XMLHttpRequest๋Š” http ๋น„๋™๊ธฐ ํ†ต์‹ ์„ ์œ„ํ•œ ํ”„๋กœํผํ‹ฐ ๋ฐ ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

๋ธŒ๋ผ์šฐ์ €๋Š” ์ฃผ์†Œ์ฐฝ์ด๋‚˜ HTML์˜ form ํƒœ๊ทธ ๋˜๋Š” aํƒœ๊ทธ๋ฅผ ํ†ตํ•ด HTTP ์š”์ฒญ ์ „์†ก ๊ธฐ๋Šฅ์„ ๊ธฐ๋ณธ ์ œ๊ณตํ•œ๋‹ค.

์œ„ ๊ธฐ๋Šฅ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ๋„ http ํ†ต์‹ ์„ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ†ต์‹ ํ•  ์ˆ˜ ์žˆ๋‹ค.

XMLHttpRequest ๊ฐ์ฒด๋Š” XMLHttpRequest ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ƒ์„ฑํ•œ๋‹ค.
XMLHttpRequest ๊ฐ์ฒด๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ œ๊ณตํ•˜๋Š” Web API์ด๋ฏ€๋กœ ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์—์„œ๋งŒ ์ •์ƒ์ ์œผ๋กœ ์‹คํ–‰๋œ๋‹ค.

const xhr = new XMLHttpRequest()

์‚ฌ์šฉ๋ฐฉ๋ฒ•

XMLHttpRequest ๊ฐ์ฒด๋ฅผ ํ†ตํ•ด Http ์š”์ฒญ์„ ํ•  ๋•Œ์— ๋Œ€๋žต ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ˆœ์„œ๋กœ ์ง„ํ–‰๋œ๋‹ค.

  1. XMLHttpRequest.prototype.open๋ฉ”์„œ๋“œ๋กœ Http ์š”์ฒญ์„ ์ดˆ๊ธฐํ™”ํ•œ๋‹ค.
  2. ํ•„์š”์— ๋”ฐ๋ผ XMLHttpRequest.prototype.setRequestHeader ๋ฉ”์„œ๋“œ๋กœ ํŠน์ • HTTP ์š”์ฒญ์˜ ํ—ค๋”๊ฐ’์„ ์„ค์ •ํ•œ๋‹ค.
  3. XMLHttpRequest.prototype.send ๋ฉ”์„œ๋“œ๋กœ http ์š”์ฒญ์„ ์ „์†กํ•œ๋‹ค.
const xhr = new XMLHttpRequest()
// http ์š”์ฒญ ์ดˆ๊ธฐํ™”
xhr.open("GET","/posts")
// http ์š”์ฒญ ํ—ค๋” ์„ค์ •
xhr.setRequestHeader("content-type","application/json")
// http ์š”์ฒญ ์ „์†ก
xhr.send()

๋งŒ์•ฝ setRequestHeader๋ฅผ ์„ค์ •ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ชจ๋“  ํƒ€์ž…์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๊ตํ™˜ํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ค์ •๋œ๋‹ค. ("content-type","*/*" )

์‘๋‹ต ์ฒ˜๋ฆฌ
์œ„ ์š”์ฒญ์— ๋Œ€ํ•œ ์‘๋‹ต์— ๋Œ€ํ•˜์—ฌ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” XMLHttpRequest ์ด๋ฒคํŠธ์—์„œ ์บ์น˜ํ•˜๋ฉด ๋œ๋‹ค.

onreadystatechange ์ด๋ฒคํŠธ์—์„œ ํ†ต์‹  ์„ธ๋ถ€ ๋‹จ๊ณ„๋ณ„๋กœ ์บ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ์ง€๋งŒ ๋ณดํ†ต http์š”์ฒญ์ด ์™„๋ฃŒ๋์„ ๋•Œ์˜ ์ƒํ™ฉ์„ ๋” ๋งŽ์ด ๋‹ค๋ฃจ๋ฉฐ ์™„๋ฃŒ๋ฌ์„ ๋•Œ๋งŒ ์ฒ˜๋ฆฌํ•  ๋•Œ์—๋Š” ์ด๋ฒคํŠธ์ธ onload๊ฐ€ ๋” ๊ฐ„ํŽธํ•˜๊ธฐ ๋•Œ๋ฌธ์— onload ์ด๋ฒคํŠธ๋กœ ํ•ด๋ณด์ž.

const xhr = new XMLHttpRequest()
xhr.open("GET","https://jsonplaceholder/todos")

xhr.send()

xhr.onload= () => {

  if(xhr.status === 200){
  console.log(JSON.parse(xhr.response))
  }
  else{
  console.log("Error",xhr.status,xhr.statusText)
  }
  
}

http ์š”์ฒญ์ด ์„ฑ๊ณต์ ์œผ๋กœ ์™„๋ฃŒ๋˜๋ฉด ์š”์ฒญ ์ƒํƒœ์ธ status๊ฐ€ 200์ด ๋œ๋‹ค.
๊ทธ๋ž˜์„œ ์š”์ฒญ์ด ์„ฑ๊ณต์ ์œผ๋กœ ์™„๋ฃŒ๋˜๋ฉด ์‘๋‹ต๊ฐ’์„ ๊ฐ€์ ธ์˜ค๋ฉด ๋œ๋‹ค.

fetch

fetch๋Š” XMLhttpRequest ๊ฐ์ฒด์™€ ๋น„์Šทํ•˜๊ฒŒ HTTP ํ†ต์‹  ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š” WEB API์ด๋ฉฐ XMLhttpRequest๋ณด๋‹ค ๋” ์‰ฝ๊ณ  ๊ฐ„ํŽธํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” API์ด๋‹ค.

const promise = fetch(url [options])

  • fetch๋Š” XMLhttpRequest๋ณด๋‹ค ๊ฐ„ํŽธํ•˜๊ฒŒ ํ†ต์‹ ํ•  ์ˆ˜ ์žˆ๋‹ค.

XMLhttpRequest์™€ fetch๋ฅผ ๋น„๊ตํ•ด๋ณด์ž.

XMLhttpRequest

const promiseGet = (url) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("Get", url);
    xhr.send();

    xhr.onload = () => {
      if (xhr.status === 200) resolve(JSON.parse(xhr.response));
      else reject(new Error(xhr.status));
    };
  });
};

promiseGet("https://jsonplaceholder.typicode.com/posts/1");

fetch

fetch("https://jsonplaceholder.typicode.com/posts/1")

ํ™•์‹คํžˆ fetch๊ฐ€ ๋” ๊ฐ„๊ฒฐํ•˜๋‹ค.

  • fetch()๋Š” HTTP์‘๋‹ต์„ ๋‚˜ํƒ€๋‚ด๋Š” Response๊ฐ์ฒด๋ฅผ ๋ž˜ํ•‘ํ•œ promise๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
    ๋•Œ๋ฌธ์— ํ”„๋กœ๋ฏธ์Šค์˜ ํ›„์† ์ฒ˜๋ฆฌ ๋ฉ”์„œ๋“œ(then,catch,finally)๋ฅผ ์‚ฌ์šฉํ• ์ˆ˜ ์žˆ๋‹ค.
  • ๋˜ํ•œ fetch๋Š” promise๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— async/await ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•ด๋‹น ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ๋˜ํ•œ fetch๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ HTTP ์š”์ฒญ ๋ฉ”์„œ๋“œ๊ฐ€ "GET"์ด๊ณ  ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ๋‘๋ฒˆ์งธ ์ธ์ž๋กœ ๋ฉ”์„œ๋“œ๋ฅผ ๋ณ€๊ฒฝํ•ด ์ค„ ์ˆ˜ ์žˆ๋‹ค.

  • fetch()์˜ ๋‘๋ฒˆ์งธ ์ธ์ž๋กœ HTTP ์š”์ฒญ ๋ฉ”์„œ๋“œ , HTTP ์š”์ฒญ ํ—ค๋”, ํŽ˜์ด๋กœ๋“œ ๋“ฑ์„ ๊ฐ์ฒด๋กœ ๋ฌถ์–ด ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • ์‘๋‹ต ๊ฒฐ๊ณผ๋ฅผ ๋ฐ›๊ธฐ ์œ„ํ•ด์„  Response ๊ฐ์ฒด์˜ json๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.
    json๋ฉ”์„œ๋“œ๋Š” Response ๊ฐ์ฒด์—์„œ HTTP ์‘๋‹ต ๋ชธ์ฒด๋ฅผ ๊ฐ์ฒดํ™”ํ•˜์—ฌ ์ทจ๋“ํ•œ๋‹ค.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((json) => console.log(json));
  • ๋งŒ์•ฝ ๋‹ค๋ฅธ origin์œผ๋กœ๋ถ€ํ„ฐ ์ธ์ฆ๊ณผ์ •๊ณผ ํ•จ๊ป˜ ๋ฆฌ์†Œ์Šค๋ฅผ ์–ป์–ด์˜ค๊ณ ์žํ•  ๋•Œ
    (์ธ์ฆ๊ณผ ๊ด€๋ จ๋œ ์ •๋ณด ๋ธŒ๋ผ์šฐ์ €์˜ ์ฟ ํ‚ค ์ •๋ณด๋‚˜ ์ธ์ฆ๊ณผ ๊ด€๋ จ๋œ ํ—ค๋”)
    credentials : include ์˜ต์…˜์„ ์„ค์ •ํ•ด์ฃผ๊ณ 
    ์„œ๋ฒ„์—์„œ๋Š” ์ด์— ๋Œ€ํ•ด Access-Control-Allow-Credentials:true๋ฅผ ์„ค์ •ํ•ด์ค˜์•ผ ํ•ด๋‹น ๋ฆฌ์†Œ์Šค๋ฅผ ์–ป์–ด์˜ฌ ์ˆ˜ ์žˆ๋‹ค. ๋˜ํ•œ ์„œ๋ฒ„์—์„œ ํ•ด๋‹น URL์„ ๋ช…์‹œ์ ์œผ๋กœ ์ž…๋ ฅํ•ด์ค˜์•ผํ•œ๋‹ค.
    (๋‹ค๋งŒ ๊ฐ™์€ origin์œผ๋กœ๋ถ€ํ„ฐ ์š”์ฒญํ•˜์˜€์„ ๋•Œ๋Š” ์„ค์ •ํ•ด์ฃผ์ง€์•Š์•„๋„ ๋œ๋‹ค.)
fetch('https://example.com', {
  credentials: 'include'// server | Access-Control-Allow-Credentials:true
});
  • ํ•˜์ง€๋งŒ fetch๋Š” status 404 & 500์—๋Ÿฌ๋ฅผ ์žก์•„๋‚ด์ง€ ์•Š๋Š”๋‹ค๋Š” ์ ์ด ์žˆ๋‹ค. ์—๋Ÿฌ๋ฅผ ์žก์•„๋‚ด์ง€ ์•Š๋Š”๋‹ค๋Š” ๋ง์€ ์‘๋‹ต ์ƒํƒœ๊ฐ€ 404๋‚˜ 500 ์ƒํƒœ์ด๋”๋ผ๋„ ์ด ์ƒํƒœ๋ฅผ error๋กœ rejectํ•˜์ง€์•Š๊ณ  ๊ทธ๋Œ€๋กœ ํ”„๋กœ๊ทธ๋žจ์ด ๋Œ์•„๊ฐ€๋„๋ก ํ•˜๊ฒŒ ํ•œ๋‹ค.
  fetch("https://jsonplaceholder.typicode.com/todo22")
    .then((response) => {
      const responseStatus = response.status;
      console.log("responseStatus :", responseStatus);

      return response.json();
    })
    .then((json) => {
      console.log(json);
    })
    .catch((e) => console.error(e));


๋•Œ๋ฌธ์— 404๋‚˜ 500 ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•ด๋„ catch ๋ฉ”์„œ๋“œ๋กœ ํ•ด๋‹น ์—๋Ÿฌ๋ฅผ ์žก์„ ์ˆ˜ ์—†๋‹ค๋Š” ๋‹จ์ ์ด ์žˆ๋‹ค.

  • ๋˜ํ•œ xhr๊ฐ™์€ ๊ฒฝ์šฐ์—๋Š” cross-origin-cookie๋ฅผ ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ณด๋‚ด์ฃผ์ง€๋งŒ fetch๋Š” credentials์™€ ๊ฐ™์€ ์˜ต์…˜์„ ์„ค์ •ํ•ด์ค˜์•ผ ์ฟ ํ‚ค์„ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๋‹ค.

So XMLHttpRequest vs fetch?

fetch๋Š” XMLHttpRequest๋ณด๋‹ค ๊ฐ„ํŽธํ•˜๊ฒŒ ์“ธ ์ˆ˜ ์žˆ์œผ๋ฉฐ promise๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘๋™๋˜์–ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ด ๋งŽ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.

ํ•˜์ง€๋งŒ XMLHttpRequest๊ฐ€ ์ง€์›ํ•˜๋Š” ๊ธฐ๋Šฅ์„ fetch์—์„œ๋Š” ์‚ฌ์šฉํ•˜์ง€ ๋ชปํ•˜๋Š” ๊ฒฝ์šฐ๋„ ์žˆ๋‹ค.

๋•Œ๋ฌธ์— XMLHttpRequest์—์„œ๋งŒ ์ง€์›ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๋ฉฐ fetch๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ํ•„์š”ํ•œ API๋ฅผ ๋„์ž…ํ•ด ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์•„๋‹ˆ๋ฉด XMLHttpRequest์„ ๊ทธ๋ƒฅ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๊ฒ ๋‹ค.

๋”ฐ๋ผ์„œ ์ƒํ™ฉ์— ๋”ฐ๋ผ ์œ ๋™์ ์œผ๋กœ ๋‘ ๊ฐœ์˜ API๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋˜๊ฒ ๋‹ค.
(ํ•˜์ง€๋งŒ ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ fetch๋ฅผ ์‚ฌ์šฉํ•ด๋„ ๊ฑฐ์˜ ๋ฌธ์ œ๊ฐ€ ์—†๋‹ค.)

axios

npm i axios

axios๋Š” ํ”„๋กœ๋ฏธ์Šค ๊ธฐ๋ฐ˜ httpํ†ต์‹ ์„ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.

๋Œ€ํ‘œ์  ํŠน์ง•์€ ๊ธฐ์กด xhr์ด๋‚˜ fetch๋Š” Web api๊ธฐ ๋•Œ๋ฌธ์— ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์—์„œ๋งŒ ์ง€์›์ด ๋˜์ง€๋งŒ axios๋Š” node.jsํ™˜๊ฒฝ์—์„œ๋„ ์ง€์›๋œ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.

์œ„ ํŠน์ง•์„ ํฌํ•จํ•˜์—ฌ axios์˜ ํŠน์ง•์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • ๋ธŒ๋ผ์šฐ์ €๋กœ๋ถ€ํ„ฐ XMLHttpRequest๋ฅผ ํ†ตํ•ด http ํ†ต์‹ 

  • node.jsํ™˜๊ฒฝ์œผ๋กœ๋ถ€ํ„ฐ http๋ฅผ ํ†ตํ•ด http ํ†ต์‹ 

  • promise ๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘๋™

  • ์š”์ฒญ๊ณผ ์‘๋‹ต์„ ์ค‘๊ฐ„์— ์บ์น˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • ์š”์ฒญ๊ณผ ์‘๋‹ต ๋ฐ์ดํ„ฐ๋ฅผ ๋ณ€ํ˜•ํ•ด์ค„ ์ˆ˜ ์žˆ๋‹ค.

  • ์š”์ฒญ์„ ์ทจ์†Œํ•  ์ˆ˜ ์žˆ๋‹ค.(abort | fetch์—์„œ๋Š” ์ง€์›์ด ์•ˆ๋จ.)

  • ์ž๋™์œผ๋กœ json data๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ์–ด json()๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค.

  • XSRF๋กœ๋ถ€ํ„ฐ ๋ณดํ˜ธํ•ด์ค€๋‹ค.

axios & fetch

axios์™€ fetch๋Š” ๊ฒ‰๋ณด๊ธฐ์— ์‚ฌ์šฉ๋ฒ•์ด ๋น„์Šทํ•ด๋ณด์ด๋Š”๋ฐ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด axios๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๋Š” ๋ญ˜๊นŒ?

  • ์šฐ์„  ์ฒ˜์Œ ์–ธ๊ธ‰ํ–ˆ๋˜ ๊ฒƒ์ฒ˜๋Ÿผ node.jsํ™˜๊ฒฝ์—์„œ๋„ ์‹คํ–‰๊ฐ€๋Šฅํ•˜๋‹ค.
    ๊ธฐ๋ณธ์ ์œผ๋กœ xhr์ด๋‚˜ fetch๋Š” ์›น API์ด์—ฌ์„œ ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์—์„œ๋งŒ ์ ์šฉ๊ฐ€๋Šฅํ•˜๋‚˜ axios๋Š” node.jsํ™˜๊ฒฝ์—์„œ๋„ ์ ์šฉ๊ฐ€๋Šฅํ•œ ์žฅ์ ์ด ์žˆ๋‹ค.

  • axios๋Š” axios ์ž์ฒด์—์„œ get๋ฟ๋งŒ ์•„๋‹ˆ๋ผ post,put,delete์™€ ๊ฐ™์€ ๋ฉ”์„œ๋“œ๋ฅผ ์ง์ ‘์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
    ๋ฐ˜๋ฉด fetch๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ get ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์ง€๋งŒ post,put,delete์™€ ๊ฐ™์€ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋‘๋ฒˆ์งธ ์ธ์ž์— ๊ฐ์ฒด ํ˜•ํƒœ๋กœ ๋ฉ”์„œ๋“œ๋ฅผ ๋ช…์‹œํ•ด์ค˜์•ผํ•œ๋‹ค.

axios

axios.get(url, {
  // ์„ค์ • ์˜ต์…˜
});

axios.post(url, {
  // ์„ค์ • ์˜ต์…˜
});

axios.put(url, {
  // ์„ค์ • ์˜ต์…˜
});

axios.delete(url, {
  // ์„ค์ • ์˜ต์…˜
});

fetch

fetch("https://example.com/profile", {
      method: "POST", // or 'PUT' or 'DELETE'
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
  • xhr์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๋งŒ๋“ค์–ด์ ธ fetch์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋Š” xhr์˜ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
    ์œ„์—์„œ ์–ธ๊ธ‰ํ–ˆ๋“ฏ์ด fetch์—์„œ๋Š” ๋ช‡๋ช‡ xhr์˜ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋Š” ๊ฒƒ์„ ๋ณด์•˜๋‹ค.
    ํ•˜์ง€๋งŒ axios๋Š” xhr๊ธฐ๋ฐ˜์œผ๋กœ ๋งŒ๋“ค์–ด์กŒ๊ธฐ ๋•Œ๋ฌธ์— timesout, abort ๊ธฐ๋Šฅ ,interceptors ๋“ฑ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

  • ๋˜ํ•œ ์ž๋™์œผ๋กœ ์‘๋‹ต ๋ฐ์ดํ„ฐ๋ฅผ json ๊ฐ์ฒดํ™” ํ•ด์ค€๋‹ค.
    xhr์ด๋‚˜ fetch๋ฅผ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ ์‘๋‹ต ๋ฐ์ดํ„ฐ๋Š” json ํ˜•ํƒœ๊ฐ€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— json()๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ์ฒดํ™”์‹œ์ผœ์ค˜์•ผํ•œ๋‹ค.
    ํ•˜์ง€๋งŒ axios๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ž๋™์œผ๋กœ json ํ˜•ํƒœ๋กœ ๋ณ€ํ™˜ ํ•ด์ฃผ์–ด ๋ฒˆ๊ฑฐ๋กœ์›€์„ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.

  • ์š”์ฒญ ๋ฐ์ดํ„ฐ ์ฆ‰ post๋‚˜ ๋‹ค๋ฅธ ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ์„œ๋ฒ„๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ผ ๋•Œ์— ์ž๋™์œผ๋กœ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด์ค€๋‹ค.

fetch๋ฅผ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ผ ๋•Œ์— JSON.stringify(data)๋ฅผ ํ†ตํ•˜์—ฌ data๋ฅผ ๋ฌธ์ž์—ดํ™”ํ•ด์ค˜์•ผํ•œ๋‹ค.

fetch

fetch(url, {
    method: "POST", // *GET, POST, PUT, DELETE, etc.
    body: JSON.stringify(data), // body data type must match "Content-Type" header
  });

axios

const url = "https://jsonplaceholder.typicode.com/todos";

const todo = {
  title: "A new todo",
  completed: false,
};

axios
  .post(url, {
    headers: {
      "Content-Type": "application/json",
    },
    data: todo,
  })
  .then(console.log);
  • ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ํ†ต์‹  instance๋ฅผ ์ƒ์„ฑ ํ•  ์ˆ˜ ์žˆ๋‹ค.
    ์—ฌ๋Ÿฌ ์„œ๋ฒ„์™€ ํ†ต์‹ ์„ ํ•ด์•ผํ•œ๋‹ค๋ฉด ๊ฐ์ž์— ๋งž๋Š” ํ—ค๋” ๋ฐ ์˜ต์…˜ ์„ค์ •๋“ฑ์„ ํ•ด์•ผํ•  ๊ฒƒ์ด๋‹ค.
    ํ•˜์ง€๋งŒ axios๋Š” ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•ด์ฃผ์–ด ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์„œ๋ฒ„์— ๋Œ€ํ•˜์—ฌ ํ•„์š”ํ•œ ์˜ต์…˜๋“ค์„ ๊ฐ๊ฐ ์„ค์ •ํ•˜์—ฌ ๊ฐ„ํŽธํ•˜๊ฒŒ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.

axios

const client1 =  axios.create({
  baseURL: 'https://first-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

const client2 = axios.create({
  baseURL: 'https://second-domain.com/api/',
  timeout: 3000,
  headers: {'X-Custom-Header': 'foobar'}
});

const client3 = axios.create({
  baseURL: 'https://third-domain.com/api/',
  timeout: 5000,
  headers: {'X-Custom-Header': 'foobar'}
});

๋งŒ์•ฝ fetch๋ฅผ ํ†ตํ•ด ์—ฌ๋Ÿฌ ์„œ๋ฒ„์™€ ํ†ต์‹ ์„ ํ•ด์•ผํ•˜๊ณ  ๊ฐ ์„œ๋ฒ„์— ๋Œ€ํ•˜์—ฌ ํ—ค๋”๋ฅผ ์„ค์ •ํ•ด์ค˜์•ผํ•œ๋‹ค๋ฉด ์„œ๋ฒ„์— ๋Œ€ํ•œ ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ๋งˆ๋‹ค ์„œ๋ฒ„์— ๋งž๋Š” ํ—ค๋” ๋ฐ ์˜ต์…˜๋“ค์„ ๋ช…์‹œํ•ด์ค˜์•ผํ•  ๊ฒƒ์ด๋‹ค.
(๋ฌผ๋ก  ํ—ค๋” ๋ฐ ์˜ต์…˜๋“ค์„ ์„ค์ •ํ•˜์—ฌ fetch๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜๋กœ ๋งŒ๋“ค์–ด ์‚ฌ์šฉํ•˜๋ฉด ๊ทธ๋Ÿด ํ•„์š”๋Š” ์—†๋‹ค.)

fetch


functio createInstance1Fetch(url){

  return fetch(url,{    
    "Cache-Control": "no-cache",
    "Content-Type": "application/json",
    "Access-Control-Allow-Origin": "*",})
}

functio createInstance2Fetch(url){

  return fetch(url,{    
    "Cache-Control": "no-cache",
    "Content-Type": "application/json",
    "Access-Control-Allow-Origin": "*",})
}
...

ํ•˜์ง€๋งŒ axios๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด axios.create๋ผ๋Š” ๋ช…์‹œ์ ์ธ ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ๊ฐ ์„œ๋ฒ„์— ๋Œ€ํ•œ ์ธ์Šคํ„ด์Šค๋ฅผ ๊ตฌ๋ถ„์ง€์„ ์ˆ˜ ์žˆ๋‹ค.

So axios & fetch

axios์™€ fetch ๋‘˜ ๋‹ค ์‚ฌ์šฉํ•˜๊ธฐ ํŽธํ•œ API, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.

fetch์— ์—†๋Š” xhr๊ธฐ๋Šฅ ๋“ฑ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” axios๋ฅผ ์‚ฌ์šฉํ•ด๋„ ์ข‹์ง€๋งŒ
(๋ฟ๋งŒ์•„๋‹ˆ๋ผ ์œ„์—์„œ ์–ธ๊ธ‰ํ–ˆ๋“ฏ์ด ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์žฅ์ ์ด ์žˆ์Œ.)
ํ•ด๋‹น ๊ธฐ๋Šฅ๋“ค์„ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค๋ฉด ๊ตณ์ด axios๋ฅผ ์„ค์น˜ํ•˜์—ฌ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

๋”ฐ๋ผ์„œ ์ƒํ™ฉ์— ๋”ฐ๋ผ fetch or axios๋ฅผ ์„ ํƒํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™๋‹ค.

Reference

-https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

0๊ฐœ์˜ ๋Œ“๊ธ€