2023-02-17(patch에러 try-catch)

데이터를 수정하고자 서버에 요청을 보낼 때 쓰는 메서드 = patch

✅ 문제 : 엑시오스를통해 HTTP의 메소드를 사용하여 DB에 데이터 수정하기

❌ 내가 짠 코드

  const onupDateHandler = async () => {
    //인자를 id와 content 두개를 받아야한다. --> 하지만 안 받아도 된다. state에 값이 저장되어 잇으니까
    //밑에 버튼핸들러도 인자 안줘도 된다
    axios.patch(`http://localhost:4001/todos/${targetId}`, {
      //-->targetId로 번수를 찾아서 title을 우리가 원하는 content로 바꿔준다 (객체형태이니 객체형태로)
      title: content,
    });
    setTodos(
      todos.map((item) => {
        if (item.id == targetId) {
          //--> 둘의 형이 달라서 동등연산자로 해야한다
          return { ...item, title: content };
        } else {
          return item;
        }
      })
    );
  };

위 코드로patch를 통해 db를 수정할 수 있게 하고 싶었지만 잘 안 됐다

⭐ 시도하여 고친 코드

await axios.patch(`http://localhost:4001/todos/${targetId}`

axios.patch()함수가 비동기 함수이기에, axios.patch()함수가 끝날 때까지 다른 함수 즉 setTodos()가 실행이 되지 않을 수 있다. 그러니 이를 해결하기 위해
await를 사용하여 axios.patch()함수가 끝날때까지 기다리도록 해야한다.

🍀🍀 더 나아가기🍀🍀

const onupDateHandler = async () => {
  try {
    await axios.patch(`http://localhost:4001/todos/${targetId}`, {
      title: content,
    });
    setTodos(
      todos.map((item) => {
        if (item.id == targetId) {
          return { ...item, title: content };
        } else {
          return item;
        }
      })
    );
  } catch (error) {
    console.log(error);
  }
};

try-catch문을 사용하여 axios.patch()함수가 실패한 경우 에러를 처리할 수 있도록 했다.

try-catch 문법은 사용하면 에러가 나도 스크립트가 죽는 것을 방지하고, 에러를 잡아서(catch) 더 합당한 무언가를 할 수 있게 된다

try {
  코드가 들어간다
}catch(error) {
  에러 핸들링을 한다 
}