How to Make HTTP callout from LWC Lightning Web Component and show data on UI.

Hey Trailblazers, In this blog we are going to create a Lightning web component  which going to make an external API callout to verify email Id and shows result to the UI.

Before creating LWC component, Have a look on my previous Blog Post for getting third party API Key and Setup remote site on Salesforce.

https://heysalesforce.org/posts/make-http-callout-from-lightning-component-and-show-data-on-ui-using-js-object

All done with this small setup ?

Let's create our LWC component for verification email ID.

emailVerifierLWC.html

<template>
    <div class="slds-box">
        <div class="slds-box">
            <img src={SfLogo}>
        <h1>Email Verifier ( Using LWC )</h1>
        <lightning-input type="email" name="emailId" label="E-mail address" onchange={inputChange}></lightning-input>
        <lightning-input type="text" label="API Key" name="apiKey" value="NhX3FJkuk4Rf5imvrg4XTCdYA" onchange={inputChange}></lightning-input>
        <br/>
        <lightning-button variant="brand" name="verifyMail" label="Verify Email" onclick={verifyMail}></lightning-button>
        <br/>
    </div>
        <div class="slds-box slds-m-top_x-small">
        <div class={resultCss}>
            Result : {outputObject.result}
        </div>
       
            Credits Left : {outputObject.credits}
        </div>
    </div>
</template>

emailVerifierLWC.js

import { LightningElement, track } from 'lwc';
import getCalloutResponse from '@salesforce/apex/emailVerifierLwcCtrl.getCalloutResponse';
import heySfLogo from '@salesforce/resourceUrl/heySfLogo';
const DELAY = 350;

export default class EmailVerifierLWC extends LightningElement {
    emailId;
    apiKey ='NhX3FJkuk4Rf5imvrg4XTCdYA';
    apiUrl;
    @track outputObject =[];
    error;
    @track SfLogo;
    @track resultCss;
    SfLogo = heySfLogo ;
    inputChange(event)
    {
        if(event.target.name === 'emailId')
        {
        this.emailId = event.target.value;
        }
        else if(event.target.name === 'apiKey')
        {
        this.apiKey = event.target.value;
        }
    }
    verifyMail(event){
       
       this.apiUrl = `https://api.millionverifier.com/api/v3/?email=${this.emailId}&api=${this.apiKey}`;
        //console.log(this.emailId);
        //console.log(this.apiKey);
        window.clearTimeout(this.delayTimeout);
        const mainUrl = this.apiUrl ;
        console.log(mainUrl);
        // eslint-disable-next-line @lwc/lwc/no-async-operation
        this.delayTimeout =setTimeout(() =>{
       
            getCalloutResponse({mainUrl})
            .then(result =>{
               console.log(result);
                //console.log('Object');
                this.outputObject = result;
                this.resultCss = result.result;
                this.error = undefined;
            })
            .catch(error => {
                console.log(error);
                console.log('error');
                this.error = error;
                this.outputResult = undefined;
            });

        }, DELAY);
    }
}

emailVerifierLWC.css

div{
    background-color: white;
    }
    .ok
    {
        background-color: aquamarine;
        color: rgb(19, 17, 17);
    }
    .invalid
    {
        color: white;
        background-color: salmon;
    }
    img {
        width:60%
    }

emailVerifierLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Apex Controller : emailVerifierLwcCtrl.cls

public with sharing class emailVerifierLwcCtrl {
        @AuraEnabled
        public static Object getCalloutResponse(String mainUrl) {
            Http h = new Http();
            HttpRequest req = new HttpRequest();
            req.setEndpoint(mainUrl);
            req.setMethod('GET');
            HttpResponse res = h.send(req);
            Object results = (Object) JSON.deserializeUntyped(res.getBody());
            return results;
        }
}

Let's test this component :

Positive Test : Correct Email ID

Negative Test: Incorrect Email ID

Let me know if you face any difficulty, Ask your question here

Thank you :)