Angular:仅调用 HTTP Observable 一次，并将返回的数据作为 Observable in Servi

Question

常见任务：我只想通过HTTP获取一次数据，然后让我的整个应用程序都可以将其作为属性访问。但是，当然，我的应用程序需要"侦听"属性，因为HTTP很慢。我只想在整个应用程序中调用 HTTP 一次(1 次(。

@Injectable()
export class EnvService {
  imageTag: String;

  envData: Observable<any>;

  constructor(protected authHttp: AuthHttp) {
    let envSubscription = this.getConfig().subscribe(envConfig => {
      this.imageTag = envConfig.imageTag;
      this.envData = {
          'imageTag' : envConfig.imageTag,
      }
      envSubscription.unsubscribe();
    });
  }

  getData(): Observable<any> {
    return this.envData;
  }
  getConfig(): Observable<any> {
    const requestOptionsArgs: RequestOptionsArgs = {
      url: '/assets/env/env.json',
      method: RequestMethod.Get
    };
    const requestOptions: RequestOptions = new RequestOptions(requestOptionsArgs);
    return this.authHttp.request(new Request(requestOptions)).map(returnedEnvConfig => {
      return {
        imageTag: returnedEnvConfig.json().imageTag,
      };
    });
  }
}

imageTag：任何都不能分配给可观察的类型

任何想法如何做到这一点？

Answer 1

您可以通过简单地使用 rxjs 共享运算符来实现您的目标。

默认情况下，HttpClient 返回的可观察量将为每个订阅执行新调用。通过添加pipe(share())，您可以更改行为并在所有订阅者之间共享响应。

这是两个案例的堆栈闪电战演示。控制台中为每个执行的 http 调用添加一行。

Answer 2

你可以这样做，一旦请求完成，将数据存储在localstorage中，所以下次当你调用它时，它会从localstorage返回数据而不去服务器。

  getConfig(): Observable<any> {
    if( this.localStorage.get('key'));
      return of(this.localStorage.get('key'));
   else {
    const requestOptionsArgs: RequestOptionsArgs = {
      url: '/assets/env/env.json',
      method: RequestMethod.Get
    };
    const requestOptions: RequestOptions = new RequestOptions(requestOptionsArgs);
    return this.authHttp.request(new Request(requestOptions)).map(returnedEnvConfig => {
      localStorage.setItem("key",returnedEnvConfig.json().imageTag);
      return  returnedEnvConfig.json().imageTag;
    });
  }
 }

---

你只是这样做

return this.authHttp.request(new 
      Request(requestOptions)).map(returnedEnvConfig => 
       returnedEnvConfig.json().imageTag);

---

它应该是这样的

return this.authHttp.request(new Request(requestOptions));

如果您想返回可覆盖服务，并且您订阅的位置执行您当前正在执行的操作。

Answer 3

使用 publishReplay(1).refCount(); 缓存操作。

 getConfig(): Observable<any> {
    const requestOptionsArgs: RequestOptionsArgs = {
      url: '/assets/env/env.json',
      method: RequestMethod.Get
    };
    const requestOptions: RequestOptions = new RequestOptions(requestOptionsArgs);
    return this.authHttp.request(new Request(requestOptions)).map(returnedEnvConfig => {
      return {
        imageTag: returnedEnvConfig.json().imageTag,
      };
    }).publishReplay(1).refCount();
  }

阅读更多： https://blog.angularindepth.com/rxjs-how-to-use-refcount-73a0c6619a4e