컴포넌트에서 계산된 비동기 - VueJ?

컴포넌트에서 계산된 비동기 - VueJ?

다음 컴포넌트에서 비동기 계산 방법에 대한 솔루션을 찾고 있습니다.

현재 컴포넌트는 다음과 같습니다.

<div class="msg_content">
   {{messages}}
</div>

<script>
export default {
  computed: {
    messages: {
      get () {
        return api.get(`/users/${this.value.username}/message/`, {'headers': { 'Authorization': 'JWT ...' }})
        .then(response => response.data)
      }
    }
  },
}
</script>

결과:{}

에서 다시 쓰는 방법Promise모드요? Promise 모드로 쓰면 비동기화할 수 있을 것 같아서요.

계산된 속성은 기본적으로 결과를 캐시하여 필요할 때마다 계산할 필요가 없도록 하는 함수입니다.사용하는 반응 값을 기반으로 자동으로 업데이트됩니다.

계산된 항목은 반응형 항목을 사용하지 않으므로 계산되어도 의미가 없습니다.지금 Promise가 반환됩니다(통상적인 동작으로 가정).then).

무엇을 달성하고 싶은지는 확실하지 않습니다만, 제가 추측하는 가장 좋은 것은 데이터 아이템을 생성하여response.data, 그리고 당신의api.get전화를 걸다뭐랄까

export default {
  data() {
      return {
        //...
        messages: []
      };
  },
  created() {
    api.get(`/users/${this.value.username}/message/`, {
        'headers': {
          'Authorization': 'JWT ...'
        }
      })
      .then(response => this.messages = response.data);
  }
}

es7은 이 작업을 매우 사소한 것으로 만듭니다.async그리고.await공리들의 돌아온 약속과 함께.vue-async 계산 패키지가 필요합니다.

export default {
   asyncComputed: {
       async myResolvedValue() {
          return await api.get(`/users/${this.value.username}/message/`, {'headers': { 'Authorization': 'JWT ...' }})
              .then(response => response.data)
       }
    }
}

언급URL : https://stackoverflow.com/questions/48641295/async-computed-in-components-vuejs