Question

将 LanguageService 类注入到我的组件中，以便它可以获取我的组件的翻译。

检查密钥是否在Map中;
如果它不在那里：它第一次从服务器获取翻译并将其添加到Map（字典）中。
如果它在那里：它采用Map的值而不是再次进入服务器。

奇怪的是，我的日志声明它找到了密钥并将在map中返回值但是当我检查Fiddler时，它会向服务器注册一个调用？

@Injectable()
export class LanguageService {

我的变量

  private loadedTranslations: Map<string, Observable<ITranslate[]>> = new Map();

我的consol.log＆amp;提琴手不同意

  public mapTranslation(url: string, key: string): Observable<ITranslate[]> {

    if (this.loadedTranslations.has(key) == false) {
      console.log("I don't have a key named " + key + ". I'll have to connect to the server");
      this.loadedTranslations.set(key, this.getTranslationFromServer(url));
    }
    else {
      console.log("I have " + key + ". I'll return the values for it!!");
    }

    console.log("Returning Translation for " + url + " with key " + key);

    return this.loadedTranslations.get(key);
  }

此方法调用服务器以获取值

  getTranslationFromServer(url: string): Observable<ITranslate[]> {
    console.log("getTranslationFromServer is called");

    return this._http.get(url)
      .map(this._helperService.extractData)
      .catch(this._helperService.handleErrors);
  }
}

示例输出是：

第一次点击
日志

我没有一个名为数据库的密钥。我必须连接到服务器
  调用getTranslationFromServer
  使用密钥数据库返回数据库/翻译的翻译

的Fiddler

GET http://localhost:55041/Database/Translations 200 OK（application / json）

第二次点击
日志

我包含1个键
  我有数据库。我将返回它的值!!
  使用密钥数据库返回/ Database / Translations的翻译

菲德勒

GET http://localhost:55041/Database/Translations 200 OK （应用/ JSON）

我尝试从Observable转换为Promise但没有运气。

为什么Fiddler说它查询数据库但是我没有看到 getTranslationFromServer被称为两次？
我该如何防止这种行为？

Answer 1

我已经编辑了我的地图，而不是持有和Observable它现在只持有ITranslate []。

我认为数据库之旅发生在内存中。

@Injectable()
export class LanguageService {
  private loadedTranslations: Map<string, ITranslate[]> = new Map();


  public mapTranslation(url: string, key: string): ITranslate[] {
    if (this.loadedTranslations.has(key) == false) {
      this.getTranslationFromServer(url).subscribe(a => this.loadedTranslations.set(key, a), e => this._helperService.handleError(e));
    }
    else {
      console.log("I have " + key + ". I'll return the values for it!!");
    }

    return this.loadedTranslations.get(key);
  }

  getTranslationFromServer(url: string): Observable<ITranslate[]> {
    return this._http.get(url)
      .map(this._helperService.extractData)
      .catch(this._helperService.handleErrors);
  }
}

方法保持触发数据库

1 个答案: