在Vue中使用箭头函数无法获取gata

Question

我是 Vue 的新手，我的问题是：我无法从 API 获取数据到我的组件。 我有一个从我的 api 获取数据的服务类。 Api 工作正常。所以代码：

import IReview from "../types/Review"
import axios from "axios"

export default class ReviewService{
    API_URL=process.env.VUE_APP_API_URL;
 
    public async getAllReviews(id: number): Promise<IReview[]>{
        const result=await axios.get(`${this.API_URL}/film/${id}/reviews`);
        console.log(result.data, "This is ok, i see my data in console")
        return result.data;
    }
}

谁想知道，我使用 filmId 从 API 获取电影评论。

得到结果很好Img

所以我得到的组件：

<template>
    <div class="ComentsField">
        <div class="ListOfComments">
            <div v-if="this.getReviewsCount()>0">
                <review :review="review"
                 v-for="review in ReviewsList" 
                 v-bind:key="review.id" 
                 v-bind:FilmId="FilmId">
                        {{review.Review}}
                </review>
            </div>
        </div>
        <hr>
        <div class="AddNewComment">
            Add
        </div>
    </div>
</template>

<script lang="ts">
import ReviewService from '@/services/review-service.ts'
import IReview from '@/types/Review.d.ts'
import  Vue from 'vue';
import Component from 'vue-class-component';
import Review from '@/components/Review.vue'

const reviewService=new ReviewService();
@Component({
    props: ['FilmId'],
 name: 'Reviews',
 components: {Review}
})
export default class Reviews extends Vue{
    ReviewsList: IReview[]=[];
    getReviewsCount(){
        return this.ReviewsList.length;
    }
    getAllReviews(){
        console.log(this.ReviewsList.length, "**IT gets me zero**")
        reviewService.getAllReviews(this.$props['FilmId']).then(data=>this.ReviewsList=data).catch(err=>console.error(err));
        console.log(this.ReviewsList, "1111111111s")//undef  BUT WHY i import data
        console.log(this.ReviewsList.length, "222222")//0 again
    }
    created()
    {
        this.getAllReviews();
    }
}
</script>

<style lang="scss">

</style>

审查

export default interface IReview
{
    id:number,
    createdOn: Date,
    updatedOn:Date,
    Review: string,
    ReviewAuthor: string,
}

在控制台日志中我评论发生了什么。

当然，我将它推送到 github，你可以在这里找到（BackEnd .NET 5）。

GitHub

我不知道为什么会这样，并且很乐意提供任何帮助。

Answer 1

您可以在文档中找到更多示例：

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/async_function

对于 axios 来说： https://github.com/axios/axios#example

Answer 2

我解决了 谁想知道我修复了我的复习课

  props: ["review", "FilmId"],

并在我的评论 v-for 中进行一些修复

<div class="ListOfComments">
  <div v-if="this.getReviewsCount()>0">
    <div v-for="review in ReviewsList" v-bind:key="review.id">
      Вошли в цикл
      <review :review="review" :FilmId="FilmId">
        Пытаемся писать ревью
        {{review.Review}}
      </review>
    </div>
  </div>
</div>

Answer 3

快速回答：您的 console.log 在 http 承诺实际解决之前执行。所以你打印出你的变量，但你还没有结果。

解决方案：将您的 console.log 移至 .then() 块中，或使用与您在服务中相同的方式使用 async/await。

其他改进：将您的 getReviewsCount 转换为 computed。