0

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.

2

1 Answer 1

3

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();
    });
  }
1
  • Another solution that I arrived at is to move this.displayOrderProducts(); to inside setOrderId(), after console.log("orderId-----1---------", this.orderId); Which I think does the same thing. Thanks @sfdcfox!
    – mackmama
    Jan 20 at 18:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .