REST Callout from Lightning Web Component Controller | Salesforce | LWC Stack ☁️⚡️

Kapil November 27, 2021

In this blog I will share the build to make a simple REST callout using Lightning Web Component Controller.

We will use a sample third party domain to do the callout.

We won't be using APEX code it's just pure JavaScript and HTML.

Rest Callout domain : https://icanhazdadjoke.com/

Configuration

You have to add your domain in the CSP Trusted Sites setting in your Salesforce org to make a successful callout as shown below :

Now you may follow the code below :

RestTest.html

1
2
3

<template>
  <center><p style="font-size: xx-large">{randomJoke}</p></center>
</template>

RestTest.js

import { LightningElement } from "lwc";

export default class RestTest extends LightningElement {
  randomJoke;
  connectedCallback() {
    const calloutURL = "https://icanhazdadjoke.com";
    fetch(calloutURL, {
      method: "GET",
      headers: {
        Accept: "application/json"
      }
    })
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
      })
      .then((responseJSON) => {
        this.randomJoke = responseJSON.joke;
      });
  }
}

Output