Dev Day

JavaScript async await 비동기 처리

async await는 자바스크립트의 비동기 처리 문법 중 하나입니다.

비동기 처리 방식을 동기 처리처럼 가능하게 해 줍니다.
async await를 이해하기 위해서는 사실 콜백 함수와 프로미스를 이해하는 게 우선입니다만 꼭 그게 아니더라도

async await를 이해할 수 있다고 생각합니다

콜백 지옥을 벗어나기 위해 프로미스를 사용하고 프로미스의 단점을 극복하기 위해 async await를 사용합니다.

코드 가독성이 뛰어나서 저 같은 주니어 개발자들이 보기에 아주 적절합니다.

 

일단 저는 Nuxt.js에서 환경에서 사용하는 게 편해서 예제는 모두 Nuxt.js에서 진행했습니다.

(다른 환경에서 해도 상관없지만 제가 편해서 Nuxt로 진행했습니다!)

 

async await 사용해보기

저는 Nuxt환경에서 진행하다 보니 이전에 만들었던 샘플 프로젝트에 진행을 했습니다.

axios를 사용해서 테스트를 할 예정이라 axios 모듈을 설치했습니다.

(axios는 비동기 모듈입니다.)

 

nuxt axios 설치

npm intstall @nuxtjs/axios

모듈 추가

  // nuxt.config.js
  
  modules: [
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios'
  ],

 

일단 이렇게 사전 준비를 마치고 async await 없이 axios를 사용하여 비동기로 호출을 하게 되면 결과는 어떻게 나오는지 간단하게 테스트를 진행해보겠습니다.

테스트를 진행하는데 API를 굳이 만들 필요까지는 없어 보여서 무료로 API를 호출할 수 있는 곳에서 가져와서 사용했습니다.

무료로 api 호출해볼 수 있는 곳

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

 

그리고 아래와 같이 페이지에 버튼을 하나 구현하고 data1, data2, data3, data4에 각 호출한 결괏값을 담을 예정입니다.

 

// pages/test.vue

<template>
  <div>
    <button class="btn btn-primary" @click="testMethod">
      TEST BUTTON
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data1 : [],
      data2 : {},
      data3 : [],
      data4 : [],
    }
  },
  methods: {
    testMethod() {
      this.data1 = this.$axios.get("https://jsonplaceholder.typicode.com/posts")
      .then(res => {
        console.log("data1 결과")
        console.log(res)
      })
      this.data2 = this.$axios.get("https://jsonplaceholder.typicode.com/posts/1")
      .then(res => {
        console.log("data2 결과")
        console.log(res)
      })
      this.data3 = this.$axios.get("https://jsonplaceholder.typicode.com/posts/1/comments")
      .then(res => {
        console.log("data3 결과")
        console.log(res)
      })
      this.data4 = this.$axios.get("https://jsonplaceholder.typicode.com/comments?postId=1")
      .then(res => {
        console.log("data4 결과")
        console.log(res)
      })
    }
  },
}
</script>

<style scoped>

</style>

 

위 코드 작성 후 npm run dev로 실행하게 되면 버튼이 생성되어 있을 겁니다.

버튼 클릭 후 콘솔을 확인해보면 비동기이기 때문에 호출한 순서에 상관없이 통신이 먼저 끝난 data2가 먼저 콘솔에 찍힌 것을 확인할 수 있습니다.

그럼 이제 async await를 사용하여 똑같이 호출해보면 결과가 어떻게 나올지 확인해보겠습니다.

기존에 썼던 함수명 앞에 async를 붙여주고 호출하는 axios 앞에 await를 붙여줍니다.

그리고 아까 편의상 넣었던 .then을 빼주겠습니다.

 

await 키워드를 사용하기 위해서는 함수가 async로 선언이 되어 있어야 합니다.
그렇지 않으면 아래와 같이 오류가 발생합니다.

 

  methods: {
    async testMethod() {
      this.data1 = await this.$axios.get("https://jsonplaceholder.typicode.com/posts")
      console.log("data1 결과")
      console.log(this.data1)
      this.data2 = await this.$axios.get("https://jsonplaceholder.typicode.com/posts/1")
      console.log("data2 결과")
      console.log(this.data2)
      this.data3 = await this.$axios.get("https://jsonplaceholder.typicode.com/posts/1/comments")
      console.log("data3 결과")
      console.log(this.data3)
      this.data4 = await this.$axios.get("https://jsonplaceholder.typicode.com/comments?postId=1")
      console.log("data4 결과")
      console.log(this.data4)
    }
  },

 

이렇게 async await를 사용하면 axios와 같은 비동기 처리를 동기처럼 사용할 수 있습니다.

axios 모듈이 비동기로 작동하지만 async await를 통해 data1의 호출 결과를 기다려 결과가 나오면 data2로 넘어가고 data2의 호출 결과를 기다려 결과가 나오면 data3으로 넘어가는 식으로 진행됩니다.

예전엔 콜백 함수나 Promise를 통해서 가능했지만 지금은 async await를 통해 간편하게 가능합니다.

 

async await 예외 처리

async await의 예외처리를 하지 않을 경우 에러가 발생해도 이후 로직이 계속 실행됩니다.
비동기 처리 후 변수에 결괏값이 담겨야 하지만 undefined가 담기게 돼버립니다.

그렇기 때문에 try catch로 감싸서 예외처리를 반드시 해줘야 합니다.

  methods: {
    async testMethod() {
      try {
        this.data1 = await this.$axios.get("https://jsonplaceholder.typicode.com/posts")
        console.log("data1 결과")
        console.log(this.data1)
        this.data2 = await this.$axios.get("https://jsonplaceholder.typicode.com/posts/1")
        console.log("data2 결과")
        console.log(this.data2)
        this.data3 = await this.$axios.get("https://jsonplaceholder.typicode.com/posts/1/comments")
        console.log("data3 결과")
        console.log(this.data3)
        this.data4 = await this.$axios.get("https://jsonplaceholder.typicode.com/comments?postId=1")
        console.log("data4 결과")
        console.log(this.data4)
      } catch (error) {
        console.log(error)
      }
    }
  },

 

비동기 처리를 동기 처리처럼 만드는 방법에 대해 간단히 작성해봤습니다.
원론적인 내용과 자세한 내용들은 작성하지 않아서 부족한 부분이 많지만 혹시나 잘못된 내용이 있다면 댓글로 남겨주세요!