Vue 동기와 비동기 처리

김민준·2023년 2월 15일
0

Frontend

목록 보기
4/14
post-thumbnail

동기식 처리

  • 코드가 작서된 순서대로 실행되는 것
  • javaScript로 구성된 vue는 기본적으로 동기식 처리를 한다.

비동기식 처리

  • 코드가 작성된 순서와는 상관없이 지정된 순서에 의해 실행되는 것

비동기식 처리 방법

1. callback

  • 호출하는 함수가 많아질수록 코드의 의존성이 올라가며, 가독성과 효율성이 떨어진다.
  • 재귀함수와 같은 형태로, 하나의 함수 안에서 다른 함수를 호출하는 방식으로 실행 순서를 부여한다.

2. promise

2-1) 특징

  • promise를 사용하면 async와 await 키워드를 사용할 수 있다.
  • resolve()가 실행되기 전까지 다른 메소드는 실행될 수 없다.

2-2) promise 동작 상태

  • pending(대기) : promise의 초기상태
  • fulfilled(이행) : promise 내부 연상 완료 -> resolve() 싱행
  • rejected(거부) : promise 내부 연상 실패 -> 예외처리

2-3) resolve()

  • resolve()가 실행되면 대기상태에서 이행상태가 된다.

2-4) promise의 예외처리

  • promise의 예외처리는 try, catch를 사용한다.
<script>
created() {
    this.getList()
  },
methods: {
  async getList() {
      try {
        const params = { item_id: this.item_id }
        const { data } = await axios.get('/getList', { params: params })
        this.nft = data.data
        this.properties = data.properties
      } catch (err) {
        // console.log(err)
      }
  }
}
</script>

<template>
  <el-form-item :label-width="labelWidth" :label="`${$t('nftView.itemName')} `" class="label-width mb-5">
     {{ nft.item_name }}
  </el-form-item>
</template>
profile
이번엔

0개의 댓글