[자바스크립트] 19. Fetch API

김건우

Apr 02, 2025

Contents

전체코드

💡

JavaScript에서 HTTP 요청을 보내고 데이터를 주고받기 위해 사용하는 비동기 통신 방식

헤더 설정

: JSON 데이터 전송 시 Content-Type을 꼭 설정해야 서버에서 제대로 받을 수 있음.

EX) application/json, application/x-www-form-urlencoded, application/xml

1. 글쓰기 요청 (POST)

사용자가 작성한 제목, 내용, 작성자를 서버로 전송합니다.


async function write1() {
  let requestBody = {
    title: document.querySelector("#title").value,
    content: document.querySelector("#content").value,
    author: document.querySelector("#author").value,
  };

  let response = await fetch("http://localhost:8080/api/boards", {
    method: "POST",
    body: JSON.stringify(requestBody),
    headers: { "Content-Type": "application/json" },
  });

  let responseBody = await response.json();
  console.log(responseBody);
}

💡 포인트

요청 타입 (method): "POST" - 데이터를 서버에 전송.

헤더 설정: Content-Type: application/json - 요청 데이터가 JSON 형식임을 명시.

데이터 변환: JSON.stringify(requestBody) - JavaScript 객체를 JSON 문자열로 변환.

응답 처리: await response.json() - 응답 데이터를 JSON으로 변환.

2. 데이터 조회 (GET)

서버로부터 특정 게시글 정보를 조회합니다.


async function get1() {
  let response = await fetch("http://localhost:8080/api/boards/1", {
    method: "GET",
  });
  let responseBody = await response.json();
  console.log(responseBody);
}

💡 포인트

요청 타입 (method): "GET" - 데이터를 가져오는 데 사용.

응답 처리: await response.json() - 서버로부터 받은 데이터를 JSON으로 변환.

3. 글 수정 (PUT)

기존 글의 제목, 내용, 작성자를 수정합니다.


async function put1() {
  let requestBody = {
    title: "제목11",
    content: "내용11",
    author: "ssar",
  };

  let response = await fetch("http://localhost:8080/api/boards/1", {
    method: "PUT",
    body: JSON.stringify(requestBody),
    headers: { "Content-Type": "application/json" },
  });

  let responseBody = await response.json();
  console.log(responseBody);
}

💡 포인트

요청 타입 (method): "PUT" - 기존 데이터를 수정할 때 사용.

응답 처리: 수정된 데이터 확인.

4. 글 삭제 (DELETE)

특정 게시글을 삭제합니다.


async function delete1() {
  let response = await fetch("http://localhost:8080/api/boards/1", {
    method: "DELETE",
  });

  let responseBody = await response.json();
  console.log(responseBody);
}

💡 포인트

요청 타입 (method): "DELETE" - 데이터를 삭제할 때 사용.

응답 처리: 삭제 결과 확인.

전체코드


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <h1>fetch get, post, put, delete</h1>
    <hr />
    <button onclick="get1()">get</button>
    <button onclick="post1()">post</button>
    <button onclick="put1()">put</button>
    <button onclick="delete1()">delete</button>

    <form>
      <input type="text" id="title" placeholder="title" /> <br />
      <input type="text" id="content" placeholder="content" /> <br />
      <input type="text" id="author" placeholder="author" /> <br />
      <button type="button" onclick="write1()">게시글쓰기</button> <br />
    </form>

    <script>
      async function write1() {
        let requestBody = {
          title: document.querySelector("#title").value,
          content: document.querySelector("#content").value,
          author: document.querySelector("#author").value,
        };

        let response = await fetch("http://localhost:8080/api/boards", {
          method: "post",
          body: JSON.stringify(requestBody),
          headers: { "Content-Type": "application/json" },
        });

        let responseBody = await response.json();

        console.log(responseBody);
      }

      async function get1() {
        let response = await fetch("http://localhost:8080/api/boards/1", {
          method: "get",
        });
        let responseBody = await response.json();

        console.log(responseBody);
      }

      async function post1() {
        let requestBody = {
          title: "제목9",
          content: "내용9",
          author: "ssar",
        };

        let response = await fetch("http://localhost:8080/api/boards", {
          method: "post",
          body: JSON.stringify(requestBody),
          headers: { "Content-Type": "application/json" },
        });

        let responseBody = await response.json();

        console.log(responseBody);
      }

      async function put1() {
        let requestBody = {
          title: "제목11",
          content: "내용11",
          author: "ssar",
        };

        let response = await fetch("http://localhost:8080/api/boards/1", {
          method: "put",
          body: JSON.stringify(requestBody),
          headers: { "Content-Type": "application/json" },
        });

        let responseBody = await response.json();
        console.log(responseBody);
      }

      async function delete1() {
        let response = await fetch("http://localhost:8080/api/boards/1", {
          method: "delete",
        });

        let responseBody = await response.json();

        console.log(responseBody);
      }
    </script>
  </body>
</html>