Javascript 如何从GET请求填充服务内部的静态数组？

我想做的很简单。我正在构建一个web应用程序，其中有一些

select

元素，我想用来自远程JSON文件（GET请求）的相同数据填充它们。我创建了一个服务，我想在其中填充一个静态数组，并从我想要的任何组件调用它。我想我错过了一些至关重要的事情
下面是一些代码：
fetchData.service.ts

我的解决方案基于

---

任何帮助都将不胜感激

您的静态阵列不能超出您的服务范围。但是，在

类范围内也不能真正有
静态

由于Angular中的
服务
在默认情况下是
单例
，您的目标可以通过以下方式实现：

@Injectable()
export class FetchDataService {

    creditorsStaticArray: Creditor[] = [];

    getCreditorsFromAPI() {
        this.http.get<Creditor[]>(this.creditorsUrl)
            .subscribe(
              items => {
                this.creditorsStaticArray = items;
              }
            );
      }

    getCreds() {
        return this.creditorsStaticArray;
    }
}

当您或您的组件（或使用
AsyncPipe
）订阅HTML时；它会将其存储在缓存中，您可以自动处理新的传入结果

在上面的示例中，您仍然可以依靠
缓存
机制，通过将缓存的数据作为
可观察的
返回，避免每次命中服务器。幸运的是，RxJS提供了大量的创建
可观察对象
，这应该不会太复杂

一个简单的例子：


getCreditorsFromAPI(): Observable<Creditor[]> {
  return this.http.get<Creditor[]>(this.creditorsUrl)
            .pipe(
                tap(data => this.creditorsCache = data)
             )
  );
}

getCreds(): Observable<Creditor[]> {
    // You could also use this to invalidate your cache after 10 minutes!
    if(this.creditorsCache.length > 0) {
        return of(this.creditorsCache)
    }

    // Because I set the return type of this function, you will need to return a valid Observable. This makes your code predictable!
    return this.getCreditorsFromAPI() // This will recreate your cache cause of the tap()!
}


getCreditorsFromAPI（）：可观察{
返回this.http.get（this.creditorsUrl）
.烟斗(
轻触（数据=>this.creditorsCache=data）
)
);
}
getCreds（）：可观察{
//你也可以使用它在10分钟后使你的缓存失效！
如果（this.creditorsCache.length>0）{
返回（this.creditorsCache）
}
//因为我设置了这个函数的返回类型，所以您需要返回一个有效的可观察对象。这使得您的代码可以预测！
返回此。getCreditorsFromAPI（）//这将重新创建缓存，因为点击（）会导致！
}

在上面的示例中，您只需要调用
service.getCreds（）
并管理组件中的订阅。每次您将可观察对象重新分配给
this.service.getCreds（）
，它都会自动为您缓存

值得深思！我不会说有一种完美的做事方式，而且肯定有更多的方式可以让你联想到罗马；但我刚才所描述的肯定是一种更为被动的

，这是Angular在其许多内部结构中所依赖的。

您的静态阵列不能超出您的服务范围。但是，在

类范围内也不能真正有
静态

由于Angular中的
服务
在默认情况下是
单例
，您的目标可以通过以下方式实现：

@Injectable()
export class FetchDataService {

    creditorsStaticArray: Creditor[] = [];

    getCreditorsFromAPI() {
        this.http.get<Creditor[]>(this.creditorsUrl)
            .subscribe(
              items => {
                this.creditorsStaticArray = items;
              }
            );
      }

    getCreds() {
        return this.creditorsStaticArray;
    }
}

当您或您的组件（或使用
AsyncPipe
）订阅HTML时；它会将其存储在缓存中，您可以自动处理新的传入结果

在上面的示例中，您仍然可以依靠
缓存
机制，通过将缓存的数据作为
可观察的
返回，避免每次命中服务器。幸运的是，RxJS提供了大量的创建
可观察对象
，这应该不会太复杂

一个简单的例子：


getCreditorsFromAPI(): Observable<Creditor[]> {
  return this.http.get<Creditor[]>(this.creditorsUrl)
            .pipe(
                tap(data => this.creditorsCache = data)
             )
  );
}

getCreds(): Observable<Creditor[]> {
    // You could also use this to invalidate your cache after 10 minutes!
    if(this.creditorsCache.length > 0) {
        return of(this.creditorsCache)
    }

    // Because I set the return type of this function, you will need to return a valid Observable. This makes your code predictable!
    return this.getCreditorsFromAPI() // This will recreate your cache cause of the tap()!
}


getCreditorsFromAPI（）：可观察{
返回this.http.get（this.creditorsUrl）
.烟斗(
轻触（数据=>this.creditorsCache=data）
)
);
}
getCreds（）：可观察{
//你也可以使用它在10分钟后使你的缓存失效！
如果（this.creditorsCache.length>0）{
返回（this.creditorsCache）
}
//因为我设置了这个函数的返回类型，所以您需要返回一个有效的可观察对象。这使得您的代码可以预测！
返回此。getCreditorsFromAPI（）//这将重新创建缓存，因为点击（）会导致！
}

在上面的示例中，您只需要调用
service.getCreds（）
并管理组件中的订阅。每次您将可观察对象重新分配给
this.service.getCreds（）
，它都会自动为您缓存

值得深思！我不会说有一种完美的做事方式，而且肯定有更多的方式可以让你联想到罗马；但我刚才所描述的肯定有点反应性

，这是Angular在其许多内部结构中所依赖的。

可从您的服务中观察到的返回：

@Injectable()
export class FetchDataService {

    creditorsStaticArray: Creditor[] = [];

    getCreditorsFromAPI() {
        return this.http.get<Creditor[]>(this.creditorsUrl);
      }
}

---

从您的服务中可观察到的回报：

@Injectable()
export class FetchDataService {

    creditorsStaticArray: Creditor[] = [];

    getCreditorsFromAPI() {
        return this.http.get<Creditor[]>(this.creditorsUrl);
      }
}

---

处理回调而不是赋值，或者通过返回

this.http.get（this.creditorsUrl）

并订阅外部service@FrV正如我在下面所说的，我用可观察物实现了所有这些，但是我看到，使用此服务的每个组件都会调用

GET

请求，我认为这将是一个性能问题，因为我希望每个组件都有大约10个选项卡。我不认为这将是一个性能问题，如果组件不同时显示：每次调用服务都是正确的。如果同时显示零部件：制作父零部件并共享结果observable@FrV这是个好主意！我没有想到这一点，我已经有了一个父组件；）通过返回

this.http.get（this.creditorsUrl）

并订阅外部的service@FrV正如我在下面所说的，我用可观察物实现了所有这些，但是我看到，使用此服务的每个组件都会调用

GET

请求，我认为这将是一个性能问题，因为我希望每个组件都有大约10个选项卡。我不认为这将是一个性能问题，如果组件不同时显示：每次调用服务都是正确的。如果同时显示组件：制作父组件并共享obs结果

 loadedCreditors: Creditor[] = [];

ngOnInit() {
    this.fetchDataService.getCreditorsFromAPI()
        .subscribe(res => this.loadedCreditors = res)

}