JavaScript Fetch Request Guide

Introduction

This guide will walk you through how to make a fetch request to an API endpoint using JavaScript. We will use the DummyAPI’s Movies endpoint for this example. For detailed information, refer to the Movies Endpoint Documentation.

Step 1: Choose Your Environment

You can either set up a local environment or use an online IDE:

• Local Environment: Ensure you have Node.js installed. Create a new JavaScript file, e.g., fetchMovies.js.
• Online IDE: Use platforms like CodePen, JSFiddle, or Repl.it.

Step 2: Write the Fetch Request

In your JavaScript file or online editor, write the following fetch request:

fetch("https://dummyapi.online/api/movies")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error))

This code sends a request to the DummyAPI Movies endpoint and logs the response to the console.

Step 3: Run Your Code

• Local Environment: Run your file using Node.js in your terminal: node fetchMovies.js.
• Online IDE: Execute the code directly in the platform.

Step 4: View the Results

Check the console of your environment. You should see the response from the API, which includes a list of movies.

Output

[
  {
    id: 1,
    movie: 'The Shawshank Redemption',
    rating: 9.2,
    image: 'images/shawshank.jpg',
    imdb_url: 'https://www.imdb.com/title/tt0111161/'
  },
  {
    id: 2,
    movie: 'The Godfather',
    rating: 9.2,
    image: 'images/godfather.jpg',
    imdb_url: 'https://www.imdb.com/title/tt0068646/'
  },
  ...
]

Conclusion

You’ve successfully made a fetch request to the DummyAPI Movies endpoint using JavaScript. Experiment with other endpoints and query parameters to see different results.