Day 91 : #100DaysofCode - FETCH를 사용하여 POST 및 PATCH 요청을 했습니다.

어제 블로그 글을 쓰기 싫었지만 코드를 작성했습니다! FETCH를 사용하여 POST 및 패치 요청을 했습니다. 내가 어떻게 했어? 글쎄, 나는 내 부트캠프에서 제공한 실습을 따랐다.

먼저 내 데이터베이스의 모든 항목을 가져와 페이지에 추가하기 위해 GET 요청을 했습니다.

function getAllToys(){
  return fetch("http://localhost:3000/toys")
  .then(function(response) {
     return response.json();
   })
   .then(function(object) {
    //  console.log(object);
     const characters = object
     characters.forEach(character =>{ 
      const collection = document.querySelector('#toy-collection')  
      // console.log(character)
      let div = document.createElement('div');
      div.className = "card"
      div.innerHTML = `<h2>${character.name}</h2><br>
      <img src=${character.image} class="toy-avatar" /><br><p>Likes: ${character.likes}</p><button class="like-btn">Like <3</button><br>`
      // console.log(collection, "this is collection")
      collection.appendChild(div)
    //  div.append(object.name)
     }) 
    //  document.body.innerHTML = object.id
    like()
   })

DOMContentLoaded 때 getAllToys() 함수를 호출했습니다.

document.addEventListener("DOMContentLoaded", () => {
  getAllToys();
}

그런 다음 데이터베이스에 추가할 수 있기를 원했기 때문에 폼을 만들고 폼에 주어진 입력을 사용하고 내가 submitData라는 이름의 함수에서 사용할 이벤트 리스너를 폼에 추가했습니다.

  const form = document.querySelector("form.add-toy-form");
  form.addEventListener("submit", (e) => {
    event.preventDefault()
    let input = document.querySelector('input.input-text')
    let image = document.querySelector('input.input-text-image')
    submitData(input.value, image.value)

  });

submitData 함수는 사용자가 양식에 입력한 이름과 이미지인 두 개의 인수를 사용합니다. 그런 다음 가져오기 요청으로 전달되어야 하는 게시 요청에 대해 configObj라는 변수를 만들었습니다.

function submitData(name, image){

  let formData = {
      name: name,
      image: image,
    };

  let configObj = {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
          },
          body: JSON.stringify(formData)
        };

       return fetch("http://localhost:3000/toys", configObj)
       .then(function(response) {
          return response.json();
        })
        .then(function(object) {
          console.log(object);
          getAllToys(object)
        })
        .catch(function(error) {
          console.log(error.message);
        });

}

그런 다음 게시 요청을했고 오류가 있으면 오류 메시지를 console.log합니다.

가져오기를 사용하여 POST 요청을 만드는 방법을 더 잘 이해하려면 이 YouTube 동영상을 자유롭게 확인하세요.



읽어주셔서 감사합니다!

진정으로,
브르타뉴