Verwendung der Promise.all()-Methode

 Promise.all() Die Methode ist eine Promise-Objektmethode, die mehrere Promise-Instanzen in ein neues Promise-Objekt einschließen kann und letztendlich ein Array zurückgibt, das die Rückgabewerte aller Promise-Instanzen enthält.

Seine Syntax ist wie folgt:

Promise.all(iterable);

  Unter diesen iterable ist der Parameter ein iterierbares Objekt, das ein Array, ein Set-Objekt usw. sein kann, aber mehrere Promise-Instanzen enthalten muss. Wenn eine der Promise-Instanzen fehlschlägt oder abgelehnt wird, schlägt das endgültige Promise-Objekt fehl und gibt einen Fehler aus.

Promise.all() Die Verwendungsszenarien der Methode umfassen mehrere asynchrone Vorgänge. Mehrere Promise-Instanzen können nach Abschluss zusammengeführt und einheitlich verarbeitet werden, was die Effizienz und Lesbarkeit des Codes verbessern kann.

Hier ist ein Beispiel, das zeigt, wie  Promise.all() Methoden zum Kombinieren mehrerer asynchroner Vorgänge verwendet werden:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('promise1 resolved'), 1000)
})

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('promise2 resolved'), 2000)
})

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('promise3 resolved'), 3000)
})

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values)  // ['promise1 resolved', 'promise2 resolved', 'promise3 resolved']
})

 In diesem Beispiel  Promise.all() wird die Methode verwendet, um drei Promise-Instanzen zusammenzuführen und letztendlich ein neues Promise-Objekt zurückzugeben. In der Rückruffunktion des neuen Promise-Objekts können Sie den Rückgabewert jeder Promise-Instanz abrufen und auf der Konsole ausgeben.

Darüber hinaus ist zu beachten, dass  Promise.all() die Methode wartet, bis alle Promise-Instanzen abgeschlossen sind, d. h. der Status aller Promise-Instanzen wird aufgelöst oder der Status einer einzelnen Promise-Instanz wird abgelehnt, bevor sie endet. Daher  Promise.all() müssen Sie bei Verwendung der Methode sicherstellen, dass alle übergebenen Promise-Instanzen Ergebnisse zurückgeben können. Andernfalls befindet sich die Methode im Wartezustand und kann nicht beendet werden.

Anwendungsfälle in tatsächlichen Projekten: Da dieser Teil des Codes im Projekt häufig verwendet wird, wird er zur Wiederverwendung in eine Methode gekapselt. Es ist zu beachten, dass Sie bei asynchronen Vorgängen ein Promise-Objekt innerhalb der Methode zurückgeben oder async/await und andere Methoden verwenden müssen, um sicherzustellen, dass Daten nach Abschluss des asynchronen Vorgangs zurückgegeben werden.

// 获取站点信息
getSationInfo(this.stationCode).then(response => {
this.stationInfo = response.data;
});

//获取因子
this.ParamConfList();

let query = {
  stationCode: this.stationCode,
  searchType: this.dataType
};

// 获取表格标题行
getTableHeader(query).then(response => {
  this.tableHeader = response.data;
})

 Im Folgenden ist dieser Code in einer Datei mit dem Namen gekapselt getStationData方法

methods: {
  async getStationData() {
    const query = {
      stationCode: this.stationCode,
      searchType: this.dataType
    };

    try {
      const [infoResponse, headerResponse] = await Promise.all([
        getSationInfo(this.stationCode),
        getTableHeader(query)
      ]);

      this.stationInfo = infoResponse.data;
      this.tableHeader = headerResponse.data;
      this.ParamConfList();
    } catch (error) {
      console.log(error);
    }
  }
}

 In diesem Beispiel wird die Methode Promise.all() verwendet, um zwei asynchrone Vorgänge in einem Promise-Objekt zu kombinieren, und Methoden wie async/await werden verwendet, um auf den Abschluss des asynchronen Vorgangs zu warten.

Wenn Sie diese Methode verwenden, können Sie den Originalcode durch  getStationData() den Code ersetzen, der die Methode aufruft:

this.getStationData();

getStationData() Dadurch können Sie Methoden in Ihrem Code mehrmals  wiederverwenden,  ohne jedes Mal denselben Code schreiben zu müssen.