CODEWITHSUNDEEP
javascriptfirebasereact-nativeasynchronous
Venus
Venus

Reputation: 121

Wait for firebase fetch to finish before calling another function

I'm retrieving some data from Firebase (latitudine and longitude) and I want to use it in another function, getDistance().

Now, by the time the second function is called, I don't yet have the results of the first one. How can I modify the code so that the second function only gets called after the first one has finished?

getLngLat = async () => {
    driverId = firebase.auth().currentUser.uid;
    firebase
      .database()
      .ref("Ride_Request/" + driverId)
      .once("value")
      .then((snapshot) => {
        if (snapshot.exists()) {
          DriverHomeContents.RiderPickUpLatitude = snapshot
            .child("pickupLatitude")
            .val();
          DriverHomeContents.RiderPickUpLongitude = snapshot
            .child("pickupLongitude")
            .val();
          DriverHomeContents.RiderDropUpLatitude = snapshot
            .child("dropOffLatitude")
            .val();
          DriverHomeContents.RiderDropUpLongitude = snapshot
            .child("dropOffLongitude")
            .val();
          );
        } else {
          this.toast.show("No ride requests", 500);
        }
      })

componentDidMount() {
this.getLngLat() ;   //first function

this.getDistance(DriverHomeContents.RiderPickUpLatitude,      //second function
DriverHomeContents.RiderPickUpLongitude,
DriverHomeContents.RiderDropUpLatitude,
DriverHomeContents.RiderPickUpLongitude)
}

Upvotes: 1

Views: 411

Answers (1)

Luke-zhang-04
Luke-zhang-04

Reputation: 793

Not gonna lie, the way you're doing it is a bit weird, but whatever. You have to await your function calls. You should look at the MDN docs on async/await

getLngLat = async () => {
    driverId = firebase.auth().currentUser.uid;

    // IMPORTANT: This async call must be awaited
    await firebase
      .database()
      .ref("Ride_Request/" + driverId)
      .once("value")
      .then((snapshot) => {
        if (snapshot.exists()) {
          DriverHomeContents.RiderPickUpLatitude = snapshot
            .child("pickupLatitude")
            .val();
          DriverHomeContents.RiderPickUpLongitude = snapshot
            .child("pickupLongitude")
            .val();
          DriverHomeContents.RiderDropUpLatitude = snapshot
            .child("dropOffLatitude")
            .val();
          DriverHomeContents.RiderDropUpLongitude = snapshot
            .child("dropOffLongitude")
            .val();
          );
        } else {
          this.toast.show("No ride requests", 500);
        }
      })
}

async componentDidMount() {
  // You have to await this first
  // this.getRiderRequestDetails();   //first function
  // You should do something like this
  await this.getLngLat()

  this.getDistance(DriverHomeContents.RiderPickUpLatitude,      //second function
  DriverHomeContents.RiderPickUpLongitude,
  DriverHomeContents.RiderDropUpLatitude,
  DriverHomeContents.RiderPickUpLongitude)
}

Upvotes: 1

Related Questions