Async & await / Try ~ catch

⚙︎ 동기와 비동기

  통신을 주고받을 때 사용할 수 있는 방법으로는 동기처리와 비동기 처리가 있다. 동기처리는 요청을 보냈을 떄 응답을 받아야지만 다음 동작이 아루어진다. 떄문에 요청 후 응답이 오지 않았다면 다음 작업들은 대기상태가 된다.이와 같은 이유때문에 만약 동기적으로 구성을 하면 데이터를 받을때까지 기다렸다가 웹이 실행될 것이다. 이는 데이터의 양이 많아질수록 웹의 실행속도를 늦추기때문에 우리는 비동기적으로 구성을 할 필요성이 있다.

⚙︎ Async & await

  비동기 함수를 만들기위해 사용할 수 있는것으로 async와 awiat가 있다. 비동기 함수 async는 함수(fucntion()) 앞에 async 키워드를 추가하여 사용할 수있다.

async function hihi() {...}

만약 화살표 함수를 사용한다면 아래와 같이 사용할 수 있다.

const hihi = async () => {,,,}

이렇게 async를 사용할 경우 결과값을 직접 반환하는 것이 아니라 'Promise'를 반환하게된다.

이러한 비동기식 함수에 await를 함꼐 쓰면 promise가 fulfill될 때 까지 잠시 중단하고 결과를 반환한다. 그리고 실행을 기다리는 다른 코드들은 중지되지 않고 그대로 실행된다.

export default function Upload() {
  const result = await createBoard({
      variables: {
          createBoardInput: {
              writer: name,
              password: pass,
              title: title,
              contents: contents
          }
      }
  })
}

* 'await'는 'async' 안에서만 사용할 수 있다.

⚙︎ Try ~ catch

  우리가 mutation이나 query를 보낼때 항상 성공하라는 보장은 없다. 백엔드 컴퓨터에 정전과같은 예상치 못한 일이 발생할 수도 있고 수정이나 조회를 할때 게시물이 삭제가 되는 바람에 문제가생길수도 있다. 이러한 경우를 대비해 우리는 오류발생시 Client에게 이를 알려줄 처리를 해야한다. 이떄 적용할 수 있는 것이 Try와 catch이다.

	try{
   	    const onClickSubmit = async () => {
            const result = await createProduct({
                 variables: {
                     seller: seller,
                     createProductInput: {
                         name: name,
                         detail: contents,
                         price: price
                    }
                }
            })
     	}
    	} catch(error) {
       	 	alert(`${error.message}의 이유로 실패하였습니다.`)
    	} finally {
         ...
     	}

  Try ~catch를 적용하면 먼저 try이 안에있는 코드를 실행하게된다. 이때 block 안에서 예외가 발생하면 catch로 넘어가 실행하게된다. 마지막으로 final-block은 위의 결과에 상관없이 항상 실행하게 된다.

이 글은 MDN Wep Docs를 참고하여 만들어진 내용입니다.

[MDN] https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Async_await