๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ“บ Front End/-- JS & ES6+

[Javascript] Fetch API๋กœ ๊ตฌํ˜„ํ•˜๋Š” Ajax ๋น„๋™๊ธฐ ํ†ต์‹ 

by Wonit 2021. 2. 26.

ajax

  • XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์ด์šฉํ•ด์„œ ์›น ์„œ๋ฒ„์™€ ๋น„๋™๊ธฐ๋กœ ํ†ต์‹ ํ•˜๊ณ , DOM ์„ ์ด์šฉํ•ด์„œ ์›น ํŽ˜์ด์ง€๋ฅผ ๋™์ ์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ธฐ๋ฒ•
  • Asynchronouse JavaScript XML
  • ํ˜„์žฌ XML์„ ์‚ฌ์šฉํ•˜๋Š”๊ฑด ๋“œ๋ฌผ๊ณ  JSON์„ ์‚ฌ์šฉ
  • ํŽ˜์ด์ง€ ์ƒˆ๋กœ๊ณ ์นจ ์—†์ด ํŠน์ • ๋ฐ์ดํ„ฐ๋งŒ ๋ฆฌ๋กœ๋“œ
  • ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›๊ณ  ์ž‘์—…์„ ์ˆ˜ํ–‰

ajax ๊ตฌํ˜„ํ•˜๊ธฐ

ajax๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๊ธฐ์ˆ ์—๋Š” ์—ฌ๋Ÿฌ ๊ธฐ์ˆ ์ด ์กด์žฌํ•œ๋‹ค.

 

๊ทธ ์ค‘์— ๋Œ€ํ‘œ์ ์ธ 3๊ฐ€์ง€์—์„œ Fetch API์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž.

  1. XMLHttpRequest
  2. Fetch API
  3. JQuery

Fetch API

Fetch API๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ XMLHttpRequest ๋ณด๋‹ค ๋” ๊ฐ•๋ ฅํ•˜๊ณ  ์œ ์—ฐํ•˜๋‹ค.


์ด๋ฒคํŠธ ๊ธฐ๋ฐ˜์ธ XMLHttpRequest๊ณผ๋Š” ๋‹ฌ๋ฆฌ Fetch API๋Š” Promise ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์–ด ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹์— ์ž˜ ๋งž๋Š” ํ˜•ํƒœ์ด๋‹ค.


๊ทธ๋ž˜์„œ then์ด๋‚˜ catch ์™€ ๊ฐ™์€ ์ฒด์ด๋‹์œผ๋กœ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.


๊ฒฐ๊ตญ ์ด๋Š” ๊ฐ€๋…์„ฑ์— ํฐ ์ด์ ์„ ์คฌ๊ณ , Async / Await ์œผ๋กœ ๋น„๋™๊ธฐ ์ฝœ๋ฐฑ์„ ์‰ฝ๊ฒŒ ๋ฒ—์–ด๋‚  ์ˆ˜ ์žˆ๊ธฐ๋„ ํ•˜๋‹ค.


๋˜ํ•œ Fetch API๋Š” JS ๊ธฐ๋ณธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ธฐ ๋•Œ๋ฌธ์—, JQuery์™€ ๊ฐ™์ด CDN ๊ณผ ๊ฐ™์€ ๋‹ค๋ฅธ ์ž‘์—…์„ ํ•˜์ง€ ์•Š์•„๋„ ๋ฐ”๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

Fetch API์˜ ๊ธฐ๋ณธ ํ˜•ํƒœ

์•ž์„œ ๋ง ํ–ˆ๋“ฏ, Fetch API ๋Š” Promise ๊ธฐ๋ฐ˜์ด๊ธฐ ๋•Œ๋ฌธ์— ์ฒด์ด๋‹ ํ˜•ํƒœ๋กœ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋‹ค.

 

๋‹ค์Œ์€ then๊ณผ catch๋กœ ์ฒด์ด๋‹์„ ํ•œ ํ˜•ํƒœ์ด๋‹ค.

fetch("http://server-ip.com")
  .then((response) => {
    return response.json();
  })
  .then((myJson) => {
    console.log(JSON.stringify(myJson));
  })
  .catch((error) => {
    console.err(error);
  });

header ์กฐ์ž‘ํ•˜๊ธฐ

์„œ๋ฒ„์™€ ํ†ต์‹ ์„ ํ•  ๋•Œ, HTTP ํ—ค๋”๋ฅผ ์กฐ์ž‘ํ•˜๋Š” ์ผ์€ ํ•„์ˆ˜์ ์œผ๋กœ ์ง„ํ–‰๋˜์–ด์•ผ ํ•œ๋‹ค.


Fetch API ์—์„œ๋„ header๋ฅผ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, ๋‹ค์Œ๊ณผ ๊ฐ™์ด option ๊ฐ์ฒด์— headers ์— ๋“ค์–ด๊ฐˆ ๋‚ด์šฉ๋“ค์„ ์ง€์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

const option = {
  headers: {
    "Content-Type": "application/json",
  },
};

fetch("http://server-ip.com", option)
  .then((response) => {
    // ์ƒ๋žต
  })
  .then((myJson) => {
    // ์ƒ๋žต
  })
  .catch((error) => {
    // ์ƒ๋žต
  });

Fetch API GET Method

Fetch API๋กœ HTTP์˜ GET ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„๋กœ ๋ณด๋‚ด๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

const option = {
  headers: {
    "Content-Type": "application/json",
  },
};

fetch("http://server-ip.com", option)
  .then((response) => {
    // ์ƒ๋žต
  })
  .then((myJson) => {
    // ์ƒ๋žต
  })
  .catch((error) => {
    // ์ƒ๋žต
  });

Fetch API POST Method

Fetch API๋กœ HTTP์˜ POST ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„๋กœ ๋ณด๋‚ด๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

const myData = {
  id: 1,
  content: "content",
};

const option = {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(myData),
};

fetch("http://server-ip.com", option).then((res) => {
  // ์ƒ๋žต
});

Fetch API PUT Method

Fetch API๋กœ HTTP์˜ PUT ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„๋กœ ๋ณด๋‚ด๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

const myData = {
  id: 1,
  content: "content",
};

const option = {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(myData),
};

fetch("http://server-ip.com", option).then((res) => {
  // ์ƒ๋žต
});

Fetch API DELETE Method

Fetch API๋กœ HTTP์˜ DELETE ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„๋กœ ๋ณด๋‚ด๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

const myData = { id: 1 };

const option = {
  method: "DELETE",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(myData),
};

fetch("http://server-ip.com", option).then((res) => {
  // ์ƒ๋žต
});

๋Œ“๊ธ€