DEV Community

Cover image for Neumorphism Website + Github API (Part 4)
Benedikt Schächner
Benedikt Schächner

Posted on

Neumorphism Website + Github API (Part 4)

Hey dear developers,

In this post, I would like to introduce a simple way to check the status of an API in JavaScript. This can be especially useful when interacting with an external API (like us) and want to make sure it's reachable.


Do you like my articles? Then I would be happy about a like and a comment!



GitHub logo SchBenedikt / schbenedikt.github.io

My amazing neumorphism html & css website using Github API hosted with github

Neumorphism Website + Github API

This project showcases my GitHub repositories and allows you to explore the projects I've been working on. It uses the GitHub API to fetch the project data and displays it in a user-friendly format.


❗THERE IS A LIMITED TOKEN REQUEST; WHY IT MAY BE PARTIALLY NOT WORKING!❗


If you like my project, I would appreciate your support with a star ⭐!


image image image image


Introduction

Welcome to my GitHub Projects showcase! This project highlights the repositories I've been working on and provides a visually appealing and user-friendly interface to explore them. It utilizes the GitHub API to fetch the project data and incorporates various design effects to enhance the overall experience.

Functionality

Fetching GitHub Projects

The getGitHubProjects(username) function leverages the power of the GitHub API to fetch the project data associated with a given username. It retrieves the repositories and their details in a JSON format, allowing…

The challenge

Let's imagine we're developing a web application that interacts with the GitHub API to get information about users and their projects. Before we start using the application, we want to make sure that the GitHub API is working properly. Otherwise, our application could fail or behave unpredictably when the API is unreachable.

The solution

Here's a simple way to check the status of an API in JavaScript:

  1. Create a function that makes a simple API call. For example, we can use the fetch method to send a request to the API.

    async function checkAPIStatus() {
      try {
        const response = await fetch("https://api.github.com/");
        if (response.status === 200) {
          // API is reachable
          console.log("🟢 GitHub API is working");
        } else {
          // API is not reachable
          console.error("🔴 GitHub API is not available");
        }
      } catch (error) {
        // API is not reachable
        console.error("🔴 GitHub API is not available");
      }
    }
    

Checking API status in JavaScript: A simple method

Hey dear developers,

In this post, I would like to introduce a simple way to check the status of an API in JavaScript. This can be especially useful when interacting with an external API and want to make sure it's reachable before taking any further action.

The challenge

Let's imagine we're developing a web application that interacts with the GitHub API to get information about users and their projects. Before we start using the application, we want to make sure that the GitHub API is working properly. Otherwise, our application could fail or behave unpredictably when the API is unreachable.

The solution

Here's a simple way to check the status of an API in JavaScript:

  1. Create a function that makes a simple API call. For example, we can use the fetch method to send a request to the API.
async function checkAPIStatus() {
   try {
     const response = await fetch("https://api.github.com/");
     if (response.status === 200) {
       // API is reachable
       console.log("🟢 GitHub API is working");
     } else {
       // API is not reachable
       console.error("🔴 GitHub API is not available");
     }
   } catch (error) {
     // API is not reachable
     console.error("🔴 GitHub API is not available");
   }
}
Enter fullscreen mode Exit fullscreen mode

Call the checkAPIStatus() function and check the status of the API.

checkAPIStatus();
Enter fullscreen mode Exit fullscreen mode

Based on the status code, you can then decide how to handle API availability. You could show a success message if the API is reachable, or throw an error message if it's unreachable.
Conclusion
Checking API status is a simple but important thing to do to develop a robust web application. By checking the status of the API, we can ensure that our application works smoothly and provides users with a positive experience.

You can incorporate this method into your web projects to ensure external APIs are working properly before taking any further steps. This helps to catch potential errors early and improve user experience.

I hope this method is helpful to you and helps you build reliable web applications. Happy coding! 🚀

Thanks,
schBenedikt

Top comments (0)