Use of Promise.all() method

 Promise.all() The method is a Promise object method that can wrap multiple Promise instances into a new Promise object, and ultimately returns an array containing the return values ​​of all Promise instances.

Its syntax is as follows:

Promise.all(iterable);

  Among them, iterable the parameter is an iterable object, which can be an array, a Set object, etc., but it must contain multiple Promise instances. If any of the Promise instances fails or is rejected, the final Promise object will fail and throw an error.

Promise.all() The usage scenarios of the method include multiple asynchronous operations. Multiple Promise instances can be merged and processed uniformly after they are completed, which can improve the efficiency and readability of the code.

Here is an example that demonstrates how to use  Promise.all() methods to combine multiple asynchronous operations:

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 this example,  Promise.all() the method is used to merge three Promise instances and ultimately return a new Promise object. In the callback function of the new Promise object, you can get the return value of each Promise instance and print it on the console.

In addition, it should be noted that  Promise.all() the method will wait until all Promise instances are completed, that is, the status of all Promise instances becomes resolved or the status of any one Promise instance becomes rejected before it ends. Therefore, when using  Promise.all() the method, you need to ensure that all Promise instances passed in can return results. Otherwise, the method will be in a waiting state and cannot be ended.

Application cases in actual projects: Since this part of the code is used many times in the project, it is encapsulated into a method for reuse. It should be noted that when it comes to asynchronous operations, you need to return a Promise object inside the method or use async/await and other methods to ensure that data is returned after the asynchronous operation is completed.

// 获取站点信息
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;
})

 Below, this code is encapsulated into a file called 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 this example, the Promise.all() method is used to combine two asynchronous operations into a Promise object, and methods such as async/await are used to wait for the asynchronous operation to complete.

When using this method, you can replace the original code with  getStationData() the code that calls the method:

this.getStationData();

 This allows you to reuse  getStationData() methods multiple times in your code without having to write the same code each time.