Question

我有Promise.all在角应用程序中。

private loading = () => {
      return Promise.all([this.getData1(), this.getData2()])
         .then(([d1, d2]) => {
         this.obj1 = d1;
         this.obj2 = d2;
      });
}

服务方法是

  getData1 = () => {
     return new Promise((res) => {
        this.subscribtion1 = this.service['a'].get().subscribe(res);
    });
 }

getData2 = () => {
     return new Promise((res) => {
        this.subscribtion2 = this.service['b'].get().subscribe(res);
    });
 }

我想将setTimeout添加到Promise.all的内容如何？要清楚，如何在setTimeout和getData1中添加getData2？

Answer 1

已编辑-根据问题的要求，使用getData1和getData2将示例更改为更友好的版本。

function runExample() {
  console.clear();

  /* extract the time to get data 1 */
  let timeToGetData1 = 1 * document.getElementById("timeToGetData1").value;
  document.getElementById("showTimeToGetData1").innerHTML = timeToGetData1;

  /* extract the time to get data 2 */
  let timeToGetData2 = 1 * document.getElementById("timeToGetData2").value;
  document.getElementById("showTimeToGetData2").innerHTML = timeToGetData2;

  /* extract the time to timeout */
  let timeToTimeout = 1 * document.getElementById("timeToTimeout").value;
  document.getElementById("showTimeToTimeout").innerHTML = timeToTimeout;

  /* create promise to get data 1 */
  var promiseGetData1 = new Promise((resolve, reject) => {
    setTimeout(resolve, timeToGetData1, 'answer of data 1');
  });

  /* create promise to get data 2 */
  var promiseGetData2 = new Promise((resolve, reject) => {
    setTimeout(resolve, timeToGetData2, 'answer of data 2');
  });

  /* Wait for getting all the data */
  var waitForAllData = Promise.all([
    promiseGetData1,
    promiseGetData2
  ]);

  /**
   * Creates a race between two promises. 
   * One is the timeout and the other is the waitForAllData
   * If time to run the wait for all is bigger than the timeout,
   * the error timeout should be thrown
   */
  var raceWithTimeout = Promise.race([
    new Promise((resolve, reject) => {
      setTimeout(reject, timeToTimeout, new Error('error timeout'));
    }),
    waitForAllData
  ]);

  /**
   * This function get the error and deal with that
   */
  async function waitForTheRaceResult() {
    try {
      /* call the race that may timeout */
      const resultOfRace = await raceWithTimeout

      /* Return the result of the race */
      return resultOfRace;

    } catch (error) {
    
      /* Result of the fail case */
      return 'timeout response';
    }
  }

  /**
   * This function does not need to deal with 
   * the error since we already convert to a return
   */
  waitForTheRaceResult().then(
    (result) => {
      document.getElementById("output").innerHTML = result;
    }
  )
}

strong {
  min-width: 150px;
  display: inline-block;
}

#output {
  display: block;
  width: 300px;
  height: 150px;
  background-color: #DDDDDD;
  padding: 20px;
}

<div>
  <strong>Time to Get Data 1:</strong>
  <input type="range" id="timeToGetData1" min="0" max="2000" onChange="runExample()" />
  <span id="showTimeToGetData1">-</span>
</div>
<div>
  <strong>Time to Get Data 2:</strong>
  <input type="range" id="timeToGetData2" min="0" max="2000" onChange="runExample()" />
  <span id="showTimeToGetData2">-</span>
</div>
<div>
  <strong>Time to Timeout</strong>
  <input type="range" id="timeToTimeout" min="0" max="2000" onChange="runExample()" />
  <span id="showTimeToTimeout">-</span>
</div>
<div id="output">
</div>

将setTimeout添加到Promise.all

1 个答案: