Question

我以为我正在慢慢熟悉Typescript / JS中的Promises，但这让我感到困惑。

我正在尝试使用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");
  });

我的最佳猜测是我在Promises方面做错了，这仅仅是由于用户计算机上的网络计时条件而触发的。但我不知道是什么！

Answer 1

这可能不是直接答案，但是如果您等待诺言，就更容易对代码进行推理。

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'");
    }
  }
}

带有JQuery的Typescript Promise似乎运行了两次？

1 个答案: