Using external Api

ApiReuse.svelte

<!-- Import the fetchData function from the api.js file -->
<script>
    import { onMount } from 'svelte'; // Import the onMount function from Svelte
    import { fetchData } from './api'; // Import the fetchData function from the api.js file
    let responseData; // Declare a variable to store the fetched data
    // Make an HTTP GET request when the component mounts
    onMount(async () => {
        try {
            // Call the fetchData function to fetch data from the API
            responseData = await fetchData();
        } catch (error) {
            // Handle the error if needed
        }
    });
</script>

<!-- Conditional rendering based on the availability of responseData -->
{#if responseData}
    <!-- Display the fetched data -->
    <p>{JSON.stringify(responseData)}</p>
{:else}
    <!-- Show a loading message while data is being fetched -->
    <p>Loading...</p>
{/if}