typescript - Vue.js + Typescript：使用 DTO 架构使用 Axios 进行基于类的获取

Question

我试图应用在这里找到的架构：

我没有成功检索对象数组 Release，然后通过 v-list 在组件内显示。我想从返回的承诺中提取对象列表。不确定如何在 Release.vue 中执行此操作。

ReleaseApi.ts

import Axios from "axios";
import Release, {ReleaseDTO} from '@/models/Release';

interface RequestInterface {  
  map(arg0: (data: ReleaseDTO) => Release): Release[] | Promise<Release[]>;
  data: ReleaseDTO[]
}

export abstract class ReleasesApi {

private static instanceAxios = Axios.create({}); //baseURL: 'http://localhost:3000/'

  static async getAllReleases(): Promise<Release[]>{
    const response = await this.instanceAxios.get<RequestInterface>('api/releases');
    return response.data.map(data => new Release(data));
  }

}

发布.vue

<template>
    <h1>Releases</h1>
    <div v-if="loading">
      <h1>Asynchroneous called when mount state</h1>
        <v-list>
          <v-list-item :key="index" v-for="(release, index) in releases">
          {{release.name}} <br/>

          </v-list-item>
        </v-list>
    </div>
</template>
 
<script lang="ts">
import { defineComponent, ref,reactive,onMounted} from 'vue';
import { ReleasesApi  } from '../api/ReleasesApi'; 
import Release from '@/models/Release';
//https://github.com/kstraszewski/playground-vue/blob/class-based-fetching/src/views/Home.vue

export default defineComponent ({
setup (){

   let loading  = ref(false);
   let releases :any = ref([]);

  onMounted (  async () =>  {
       loading.value  = false;
       releases.value =  await ReleasesApi.getAllReleases();
       console.log(JSON.stringify(releases.value));
       loading.value  = true;

  })

   // expose to template
  return {loading,releases};

}
});

  </script>

发布.ts

export class ReleaseInterface{
  release_id?: number;
  date?: Date;
  name?: string;

}

export class ReleaseDTO implements ReleaseInterface{
  release_id?: number = 0;
  date?: Date = new Date(2012, 0, 1);
  name?: string = "";

}

export default class Release extends ReleaseDTO {

  constructor(dto: ReleaseDTO){
    super();
    Object.assign(this, dto);
  }

  get fullName(): string {
    return `${this.release_id}  ${this.name}`;
  }

}

使用 ：

让释放：释放[] | 承诺<Release[] = ref([]);

错误无法编译，出现 1 个错误
下午 4:52:53

/home/jp/eclipse-workspace/Vue/scs/frontend/src/components/Release.vue.ts 中的错误

[tsl] /home/jp/eclipse-workspace/Vue/scs/frontend/src/components/Release.vue.ts(10,49) TS1005 中的错误：“>”预期。

@ ./src/components/Release.vue?vue&type=script&lang=ts 1:0-327 1:0-327 1:328-644 1:328-644 @ ./src/components/Release.vue @ ./src /main.ts@multi (webpack)-dev-server/client?http://192.168.226.145:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

正在检查问题... src/components/Release.vue:24:8 TS2322 中的错误：类型 'Ref<never[]>' 不可分配给类型 'Release[] | 承诺<Release[]>'。类型 'Ref<never[]>' 缺少类型'Promise<Release[]>' 中的以下属性：然后，catch，[Symbol.toStringTag]，finally 22 | 23 | 让加载=参考（假）；

24 | 让释放：释放[] | 承诺<Release[] = ref([]); | ^^^^^^^^ 25 | 26 | onMounted ( async () => { 27 | loading.value = false;

src/components/Release.vue:28:17 TS2339 中的错误：“Release[] 类型上不存在属性“值”| 承诺<Release[]>'。“Release[]”类型上不存在属性“值”。26 | onMounted ( async () => { 27 | loading.value = false;

28 | release.value = 等待 ReleasesApi.getAllReleases(); | ^^^^^ 29 | console.log(JSON.stringify(releases.value)); 30 | 加载值=真；31 |

src/components/Release.vue:29:44 TS2339 中的错误：“Release[] 类型上不存在属性“值”| 承诺<Release[]>'。“Release[]”类型上不存在属性“值”。27 | 加载.值 = 假；28 | release.value = 等待 ReleasesApi.getAllReleases();

29 | console.log(JSON.stringify(releases.value)); | ^^^^^ 30 | 加载值=真；31 | 32 | })

标签： typescriptvue.js