将 Front End/Angular 订阅为 forkJoin 时处理 JSON 响应的最佳方法？

Question

我看了很多关于这类问题的答案，每个答案都有自己的回应；在我的例子中，我没有得到任何这些，因为我的界面根本没有像我想要的那样映射 json 。自从使用 Root-object 和嵌套接口以来，我尝试了多种解决方案，但我在这里问，哪种方法是在前端处理这些 JSON objects 的最佳方法，如何将其映射到这个特定的（fork-Join）。我想问一下，除了 Intellisense 之外，使用 interfaces/classes/ 地图的真正好处是什么？跟数据传播有关？

有问题的 json 结构：

{
    Title: "", 
    Year: "", 
    Rated: "", 
    Released: "", 
    Runtime: "", 

…}

就这么简单。但是回到我的服务中，我用 forkjoin 调用它：

 getMovies(name: string, year?: string): Observable<any> {
    let shortPlot = this.http.get(
      "https://www.omdbapi.com/?t=" +
        name +
        "&plot=short&y=" +
        year +
        "&apikey=[my key]"
    );
    let fullPlot = this.http.get(
      "https://www.omdbapi.com/?t=" + name + "&plot=full&apikey=[my key]"
    );
    return forkJoin([shortPlot, fullPlot]);
  }

组件中的订阅：

getMovie() {
    this.spinner = true;

     this.movieService
      .getMovies(this.name.value)
      .subscribe((dataList: any) => {
        this.movies = Array.of(dataList[0]);
        this.spinner = false;
        let error: any = this.movies.map(error => error.Error);
        if (error[0]) {
          this.notfound = error[0];
          this.error = true;
        } else {
          this.error = false;
          this.movieRate = this.movies.map(rating => rating.imdbRating.toString());
        }
      })),
      error => console.log(error);
  }

在 HTML 中，我渲染数据如下：

 <div *ngFor="let m of movies">

<h5 class="mt-0">{{m.Title}}, {{m.Year}}</h5>
</div>

如您所见，我没有使用接口，但我应该使用。任何人都可以解决我？

谢谢

编辑：订阅后的日志：

Answer 1

让我们分解一下，

what are the real benefits of using the interfaces/classes/ maps besides the Intellisense?

使用接口和类不仅会为您提供智能感知，还会为您的代码提供静态类型安全。为什么这很重要，假设您有一个具有以下结构的接口，

export interface Demo {
   field: string;
}

// in some other file 1
demo.field.substring(1, 2);

// in some other file 2
demo.field.lenght;

您在代码中的很多地方都使用了这个接口。现在，出于某种原因，您知道属性应该是 number 而不是 string。所以这里打字稿只会在编译时给你所有的错误。

export interface Demo {
   field: number;
}

// in some other file 1
demo.field.substring(1, 2); // error

// in some other file 2
demo.field.lenght // error

另外，在typescript转译后会生成javascript个文件，现在javascript是解释型语言，你的代码在javascript之前不会被测试运行-time 实际上执行了有问题的行，但是在 typescript 中你只会在编译阶段得到错误。

您可以在任何地方使用 any，但这样您将缺少静态类型。

通过接口和类，您 还可以获得 OOP 特性，例如继承等

It has to do with data propagation?

您的前端永远不知道将从 api 接收到什么类型的数据。因此，开发人员有责任将接收到的数据映射到某个接口。

同样如上所述，如果后端以某种方式更改了接收到的某些字段的类型json，那么它将再次在编译时被捕获。

如果 forkJoin 结合了两个 json 的输出，您可以有两种不同的类型。

Demo

export interface Demo1 {
  field1: string;
}

export interface Demo2 {
  field2: number;
}

// in service layer
getData(): Observable<[Demo1, Demo2]> {
   const res1 = this.http.get(...);
   const res2 = this.http.get(...);
   return forkJoin([res1, res2]);
}

// in component
this.dataService.getData().subscribe(res => {
    // you will get type safety and intellisense for res here
    console.log(res[0].field1)
})

I am not working with an interface and I should.

是的，你应该使用 interfaces，如果你没有使用 typescript 的功能，那么使用它有什么意义。 :)

将 Front End/Angular 订阅为 forkJoin 时处理 JSON 响应的最佳方法？

Best approach to deal with JSON responses in the Front End/Angular when subscribing it as a forkJoin?

json

interface

fork-join

angular