Typescript Promise с JQuery запускается дважды? - PullRequest
0 голосов
/ 21 декабря 2018

Я думал, что я постепенно начинаю понимать Promises в Typescript / JS, но это сбило меня с толку.

Я пытаюсь использовать Promises, чтобы дождаться двух запросов JQuery getJSON для завершения.С моим браузером - с доступом к локальному серверу - все работает нормально: но я получил журнал HAR от пользователя, показывающий, что запросы getJSON дублируются, и Promise разрешается дважды.Я вообще не могу воспроизвести это поведение, но оно согласуется для пользователя, используя Chrome 71 с отключенными плагинами.

Я бы ожидал, что вывод консоли будет примерно таким ...

   Document Ready
   File Loaded
   Query Loaded
   Got file and query

Но вместо этого - на этом компьютере пользователя это больше похоже на

   Document Ready
   File Loaded
   Query Loaded
   File Loaded
   Query Loaded
   Got file and query
   Got file and query

Вот немного упрощенный код.

class Panel {
  private pathName: string;

  constructor(name: string) {
    this.pathName = name;
  }

  async loadStuff(buster: string): Promise<any> {
    // start to fetch the file JSON. 
    let fileP = $.getJSON(this.pathName + "/file.json", { mtime: buster });

    // start to run the query
    let queryP = $.getJSON("/api/query");

    return fileP.then(async (data: any) => {
      console.log("File loaded");
      this.dosomething(data.objects);

      return queryP.then((qdata: any) => {
        console.log("Query loaded");
        this.dosomethingelse(qdata);
      });
    }
      , () => {
        alert("Error loading '" + this.pathName + "/file.json'");
      });
  }
}

$(() => {

  console.log("Document ready");

  let bp: Panel = new Panel("foo");  
  let promise: Promise<void> = bp.loadStuff("test");

  promise.then(() => {
    console.log("Got file and query");
  });

Мое лучшее предположение: я делаю что-то не так сОбещания, которые запускаются только из-за условий синхронизации сети на компьютере пользователя.но я понятия не имею, что!

1 Ответ

0 голосов
/ 21 декабря 2018

Вероятно, это не прямой ответ, но вам будет проще рассуждать о вашем коде, если вы будете ждать своих обещаний.

class Panel {
  private pathName: string;

  constructor(name: string) {
    this.pathName = name;
  }
  async loadStuff(buster: string): Promise<any> {
    try {
      // start to fetch the file JSON.
      let fileP = await $.getJSON(this.pathName + '/file.json', {
        mtime: buster,
      });
      this.dosomething(fileP.objects);

      // start to run the query
      let queryP = await $.getJSON('/api/query');
      this.dosomethingelse(queryP);
    } catch (e) {
      alert("Error loading '" + this.pathName + "/file.json'");
    }
  }
}
...