How to Fetch Your Posts From dev.to API With JavaScript

#javascript #html #beginners

The Fetch API is a modern interface that allows you to make HTTP requests in the web browsers. It is a simple and clean API that uses Promises to deliver more flexible features to request resources from the server.

If you have worked with XMLHttpRequest (XHR) object, the Fetch API can perform all the tasks as the XHR object.

In the article, you will learn how to make use of the FETCH API in JavaScript to fetch all your written posts from dev.to Free API.

The Devcommunity API would really be helpful for individuals putting up a small portfolio and not ready to build a blog section.

You can easily call all your published articles/posts from Devcommunity to your portfolio blog section.

Getting Started

The fetch() method returns a Promise which we allow us to use the then() and catch() methods to handle response, either success or failure:

Here is a simple syntax:

    fetch(url) 
    .then(response => {
     // handle the response 
     }) 
     .catch(error => {
      // handle the error
     });

Here is a link to the Devcommunity API where you can access your articles - https://dev.to/api/articles?username=olawanle_joel

All you have to do is replace the username with yours.

Using fetch API

Below I will be fetching from the Devcommunity API.

    fetch('https://dev.to/api/articles?username=olawanle_joel')
    .then((response) => response.json())
    .then(data => console.log(data))
    .catch((error) => console.log(error));