javascript - 如何使用 Promise.all 等待两个请求，然后在回调中调用其他函数？

Question

我正在尝试等待两个请求，我从 firebase DB 获取数据并设置为状态，

我想在两个请求完成后，将结果数据连接到一个数组中，

所以我尝试将两个请求推送到一个数组中，然后使用

> Promise.all(promises).then(()=>this.updateData());

但它没有按预期工作，我可以在控制台 updateData() 之前调用“代码在这里

 fetchOrders = async () => {
         ....
 let promises = [];
    promises.push(
      //  First service orders
      database()
        .ref(
          `Providers/CategoriesOrders/${this.state.serviceName[0] ||
            this.state.serviceStorage[0]}`,
        )
        .on('value', this.ordersCallbackOne),
    );



promises.push(
      // Second service orders
      database()
        .ref(
          `Providers/CategoriesOrders/${this.state.serviceName[1] ||
            this.state.serviceStorage[1]}`,
        )
        .on('value', this.ordersCallbackTwo),
    );

  Promise.all(promises).then(() => this.updateData());
  };



ordersCallbackTwo = snapshot => {
    let orderArr = [];
    snapshot.forEach(childSnapshot => {
      orderArr.push({
        snapshotKey: childSnapshot.key,
        username: childSnapshot.val().username,
      });
    });
    this.setState({orderServiceTwo: orderArr}, () =>
      console.log('2', this.state.orderServiceTwo), // it's log data here
    );
  };

我想在两个请求完成后调用的函数。

  updateData = () => {
    // if (this.rejectedOrders?.length >= 1) {
    //   const orders = this.state.orders.filter(
    //     order => !this.rejectedOrders.some(key => order.snapshotKey === key),
    //   );
    //   this.setState({orders, loading: false});
    //   return;
    // }

    console.log('ordersOne!', this.state.orderServiceOne); // empty!

    const order1IDs = new Set(
      this.state.orderServiceOne.map(({snapshotKey}) => snapshotKey),
    );
    console.log('order1IDs', order1IDs);
    const combined = [
      ...this.state.orderServiceOne,
      ...this.orderServiceTwo?.filter(
        ({snapshotKey}) => !order1IDs.has(snapshotKey),
      ),
    ];
    console.log('combined', combined);
    this.setState({
      orders: combined,
      loading: false,
    });
  };

Answer 1

on('value') 不会返回 promise ，并且不会在这里工作。它仅用于将监听器附加到查询，并且将无限期地接收结果，直到调用 off()。

相反，您应该使用 once('value') ，它执行一次查询并在完成时返回一个 promise 。