calling method in connectedcallback not working as expected

Question

I'm trying to set orderId before I call displayOrderProducts(). Even though I'm calling the method to set orderId before the method it is used in, it seems to reverse the order:

console:

orderId-------2------- undefined
orderId-----1--------- a093S000001QjyyQAC

.js:

import { LightningElement, api, track, wire } from 'lwc';
import orderProducts from '@salesforce/apex/ResourceListController.orderProducts';
import getOrder from '@salesforce/apex/ResourceListController.getOrder';

export default class ResourceAssignForListPage extends LightningElement {
    @api recordId;
    orderId;
    @track orderProductsList;
    @track objectApiName = 'Order_Product__c';

    setOrderId() {

        getOrder({recordId: this.recordId})
        .then(data => {
            this.orderId = data.Id;
            console.log('orderId-----1---------',this.orderId);
        })
        .catch(error => {
            console.log(JSON.stringify(error));
        });


    }

    displayOrderProducts() {
        this.orderProductsList = [];

        console.log('orderId-------2-------',this.orderId);
        orderProducts({recordId: this.orderId})
        .then(data => {
            data.forEach(record => {
                this.orderProductsList.push(record);
            });
        })
        .catch(error => {
            console.log(JSON.stringify(error));
        });
    }

    connectedCallback(){
        this.setOrderId();
        this.displayOrderProducts();
    }
}

I would expect the console.logs to be in opposite order. Any help appreciated.

Answer 1

When you make a call to the server, the code continues running without waiting for the response from the server. The then is guaranteed, in this case, to be called after displayOrderProducts. The solution is to wait for the response from the server. You can write this with more promises, but I find it easier to just use async/await:

async setOrderId() {
  try {
    const order = await getOrder({recordId: this.recordId});
    this.orderId = order.Id;
  } catch(e) {
    // Handle server error here
  }
}
async connectedCallback() {
  await this.setOrderId();
  this.displayOrderProducts();
}

For completeness, using Promises would look like this:

  setOrderId() {
    return new Promise((resolve, reject) => {
      getOrder({ recordId: this.recordId })
        .then((data) => {
          this.orderId = data.Id;
          console.log("orderId-----1---------", this.orderId);
          resolve();
        })
        .catch((error) => {
          console.log(JSON.stringify(error));
          reject(error);
        });
    });
  }

  displayOrderProducts() {
    this.orderProductsList = [];
    console.log("orderId-------2-------", this.orderId);
    orderProducts({ recordId: this.orderId })
      .then((data) => {
        data.forEach((record) => {
          this.orderProductsList.push(record);
        });
      })
      .catch((error) => {
        console.log(JSON.stringify(error));
      });
  }

  connectedCallback() {
    this.setOrderId().then(() => {
      this.displayOrderProducts();
    });
  }