Почему не определяется объект Promise?

108

31 мая 2021, 10:20

Почему вычисляемое свойство,полученное из Промиса, выдает [object Promise] на самой странице, хотя в консоли 14 (как и должно быть):

<div id="content">
  <div v-if="allNewsList">{{allNewsList}}</li>
</div>
<script>
const app = new Vue({
    el: '#content',
    computed: {
      async allNewsList() {
        let data = await axios.get('http://news/filtered_news/author_all/period_all').then(response => {return response.data});
        console.log(data.length);
        return data.length;
      },
    }
 });

Answer 1

Все верно по поводу asyncСomputed, а вот как вариант если сделать просто по create.

new Vue({ 
  el: '#content', 
  data: { 
    allNewsList: null 
  }, 
  created() { 
    this.$http.get('https://api.coindesk.com/v1/bpi/currentprice.json') 
      .then(function(response) { 
        if (response.status == "200") { 
          this.allNewsList = response.headers.map['content-length'][0]; 
        } 
      }) 
  }, 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script> 
<div id="content"> 
  <div v-if="allNewsList">{{ allNewsList }}</div> 
</div>

Answer 2

Сами по себе св-ва в computed будут вызваться как обычные функции. Грубо говоря

const app = new Vue({
    el: '#content',
    computed: {
      async data() {
        let data = await asyncOperation();
        return data.length;
      },
    }
 });
 // Где-то в коде vue будет вызвано просто
 computed.data();
 // next code...

Становится понятно, что никто не дожидается выполнения асинхронной функции, поэтому она и возвращает Promise<value>, которое используется, как значение.

хотя в консоли 14 (как и должно быть):

Потому уже внутри функции вы дожидаетесь выполнения асинхронной функции. А значит и вернет она уже значение, а не Promise

Что делать? Использовать плагин: vue-async-computed

Вот пример из документации:

new Vue({
  data: {
    userId: 1
  },
  asyncComputed: {
    username () {
      return Vue.http.get('/get-username-by-id/' + this.userId)
        .then(response => response.data.username)
    }
  }
}