how to call two functions in one onclick in lwc?

Question

I am very new to LWC and Javascript.

I have an LWC component with a ightning-input tag with "type=search" and one button with onclick event.

When I searched for a keyword, I was supposed to make it possible to search two tables including the keyword I searched for. But It didn't work.

I think I need to call two functions in one onclick. But I really don't know How to do.

This is my HTML and JS Code. Thanks for help!!

HTML

<template>
  <lightning-card>
        <lightning-layout multiple-rows="true" vertical-align="end">
            <lightning-layout-item size="3" padding="arround-samll">
                <lightning-input type="search" value={key} onchange={updateKey}>
                </lightning-input>
            </lightning-layout-item>
           <lightning-layout-item size="1" padding="arround-samll">
                <lightning-button label="Search" onclick={handleSearch}></lightning-button>
           </lightning-layout-item>
           <lightning-layout-item size="8" padding="arround-samll"></lightning-layout-item>
        </lightning-layout>

        <br>
            <lightning-layout multiple-rows="true" vertical-align="end">
                <lightning-layout-item size="12" padding="arround-samll">
                    <lightning-datatable key-field="id" data={accounts} columns={cols}> 
                    </lightning-datatable>
                </lightning-layout-item>
           </lightning-layout>
        
        <br>

        <lightning-layout multiple-rows="true" vertical-align="end">
            <lightning-layout-item size="12" padding="arround-samll">
                <lightning-datatable key-field="id" data={contacts} columns={colums}> 
                </lightning-datatable>
            </lightning-layout-item> 
        </lightning-layout>
</lightning-card>

</template>

• JS

import { LightningElement, track } from 'lwc';
import getAccounts from '@salesforce/apex/accountController.getAccounts';
import getContacts from '@salesforce/apex/accountController.getContacts';

export default class Tpms extends LightningElement {
    key;
    @track accounts;
    @track contacts;

    updateKey(event){
        this.key = event.target.value;
    }

    handleSearch(){
        getAccounts({searchkey: this.key})
        .then(result=>{
            this.accounts = result;
        })
        .catch(error=>{
            this.accounts = null;
        });
    }


    cols=[
        {label: 'nub', fieldName: 'Phone', type: 'phone'},
        {label: 'nm', fieldName: 'Name', type: 'text'},
        {label: 'ord', fieldName: 'Industry', type: 'text'},
        {label: 'dat', fieldName: 'Phone', type: 'phone'},
        {label: 'sta', fieldName: 'Industry', type: 'text'}
    ]

    colums=[
        {label: 'nub', fieldName: 'Phone', type: 'phone'},
        {label: 'nm', fieldName: 'Name', type: 'text'},
        {label: 'lin', fieldName: 'Email', type: 'text'},
        {label: 'dat', fieldName: 'Phone', type: 'phone'},
        {label: 'sta', fieldName: 'Email', type: 'text'}
    ]

}

Answer 1

You can call both methods at once with Promise.all:

async handleSearch() {
  const searchKey = this.key;
  const [accounts, contacts] = await Promise.all([
    getAccounts({ searchKey }), getContacts({ searchKey })
  ])
  this.accounts = accounts;
  this.contacts = contacts;
}

Where async/await is used to allow the code to flow asynchronously. This method can save one round trip to the server, so it may run slightly faster.