Vue.js

async 와 await에 대하여

MDanderson 2023. 4. 19. 01:24

async 키워드는 함수가 비동기(Asynchronous)로 동작하도록 지정합니다. 비동기 함수는 항상 Promise 객체를 반환합니다. 이 경우, axiosInst.post() 메서드가 HTTP 요청을 수행하며, 이는 일반적으로 비동기 작업입니다.

async 키워드를 사용하면, 함수 내에서 await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다릴 수 있습니다. 이를 통해 코드를 동기식 방식으로 작성할 수 있습니다. 이렇게 하면, 비동기 작업의 결과를 쉽게 처리하고 에러 처리를 개선할 수 있습니다.

이 함수에서 axiosInst.post() 메서드를 사용하고 있기 때문에, 이 작업은 비동기로 처리되어야 합니다. 따라서 async 키워드를 사용하여 이 함수를 비동기로 지정합니다.

예를 들어, 다른 함수에서 이 작업의 결과를 처리하려면 다음과 같이 작성할 수 있습니다:

 

 

await을 안쓰고 작동하게 하는 방법은 없을까?
물론 가능합니다. await를 사용하지 않고 비동기 작업의 결과를 처리하려면 Promise의 then()과 catch() 메서드를 사용할 수 있습니다. 이렇게 하면 비동기 작업이 완료되면 then() 메서드의 콜백 함수가 호출되고, 오류가 발생하면 catch() 메서드의 콜백 함수가 호출됩니다.

requestSignUpCheckCafeCodeToSpring() 함수를 호출하고 결과를 처리하는 예제를 살펴보겠습니다.