How to do Callout from Lightning web components

Hello Friends,

Today we are going to disscuss ,how to do Callout from Lightning web components.we can do callout by two way

  1) Call apex Class from LWC and from apex class call REST or SOAP API(Server Side)
`2) Call REST or SOAP Api from LWC component controllert .(Client Side)

Calling REST or SOAP Api from LWC ,we can do my The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipelin.

sample code for Fetch Api

fetch('http://example.com/vikas.json')
  .then(response => response.json())
  .then(data => console.log(data));

First,Make sure your endpoint is white-list in Content Security Policies (CSP). This is a major difference between callout from Apex vs Callout from the LWC controller, As in Apex, we need to add RemoteSiteSetting. While in LWC JS Controller CSP trusted site do the work

Steps-Add Endpoint URL in CSP:
From Setup, enter CSP Trusted Sites in the Quick Find box, and then CSP Trusted Sites


Now we will create LWC compoent for Callout

lwcMakeTestCallout.html

<template>

    <lightning-card>

        <h3 slot="title">

            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>

            Make Callout From Lightning Web Components (LWC)

        </h3>

        <div slot="footer">

                

        </div>

        <div class="slds-p-around_medium lgc-bg">

            <lightning-button label="Get The Joke" onclick={getTheDetails}></lightning-button>

        </div>

        <div class="slds-p-around_medium lgc-bg">

            <lightning-textarea readonly value={receivedMessage} rows="7" style="height:150px;"></lightning-textarea>

        </div>   

    </lightning-card>

</template>

lwcMakeTestCallout.js

import { LightningElement } from 'lwc';

export default class LwcMakeCallout extends LightningElement {
    receivedMessage;
    hasRendered = false;
    
    getTheJoke() {
        const calloutURI = 'https://icanhazdadjoke.com';
        // requires whitelisting of calloutURI in CSP Trusted Sites
        fetch(calloutURI, {
            method: "GET",
            headers: {
                "Accept": "application/json"    //  We can add more paremeter as per our requirement 
              }
        }).then(
            (response) => {
                if (response.ok) {
                    return response.json();
                } 
            }
        ).then(responseJSON => {
            this.receivedMessage = responseJSON.joke;
            console.log(this.receivedMessage);
        });
    }

    renderedCallback() {
        if(this.hasRendered == false) {
            this.getTheJoke();
            this.hasRendered = true;
        }
    }
}