TIL 46일차

Moon Seongseok·2021년 3월 18일

TIL

오늘 목표했던 것 🗒

Chatterbox 구현 ✓

문제가 있었는지?

1-1. 서버에 메시지 전송 요청을 보낸 후, 요청이 다 끝나면 브라우저 새로고침 하는 식으로 구현하려고 했는데 요청이 끝나기 전에 새로고침이 먼저 됐었다

1-2. async를 적용시켰는데도 제대로 작동되지 않았다.

해결했던 방법

1-1. async, await을 쓰면 될 것 같아 코드에 적용을 시켰다.

function handleButton() { // 버튼 클릭했을 시, 작성한 새 정보들을 서버로 보내는 이벤트 함수
  if(inputUser.value && inputChat.value) {
    userData.username = inputUser.value;
    userData.text = inputChat.value;
    async function asyncSend() { // 서버에 무사히 정보가 들어갈 때까지 기다리기 위해 async 적용
      let data = userData
      await app.send(data) 
      location.reload(); // 서버에 메시지가 들어간 후에, 새로고침을 하여 브라우저에 메시지 업로드
    }
    asyncSend();
  }
}

1-2 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await이 제대로 작동이 된다는 것을 놓쳤었다. await을 지정해준 app.send 메소드의 결과값을 promise 객체로 리턴하게 만들었더니 제대로 동작을 하였다.

관련 링크 : 캡틴 판교 - 자바스크립트 async & await