loading...

Fetch your posts from DevCommunity API with JavaScript

olawanle_joel profile image Joel Olawanle ・Updated on ・2 min read

In the article, you will learn how to make use of the FETCH API in JavaScript to fetch from an API. I will be making use of the Dev.to 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 posts on Devcommunity to you portfolio blog.

Getting Started

Here is a link to 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.

FETCH API

Before I proceed, let me explain few things about Fetch API.

The Fetch API is a modern interface that allows you to make HTTP requests in the web browsers.

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

In addition, it is a simple and clean API that uses the [Promise](https://www.javascripttutorial.net/es6/javascript-promises/) to deliver more flexible features to request resources from the server.

The fetch() method returns a Promise so you can use the then() and catch() methods to handle it:

Here is a simple syntax:

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

The url will be replaced by the link to the 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));

The above code will return all your articles from Devcommunity as Json to my Dev Console.

There are other formats or methods of returning the response such as:

  • text()
  • blob()
  • fromData(), e.t.c.

Summary

Once you have successfully fetched all the results of the API and it returns the content as expected. You can now start making use of those values.

Here is a repository in which I made use of the Devcommunity api to call my articles to a mini portfolio.

Useful Resources

Discussion

pic
Editor guide
Collapse
sincerelybrittany profile image
Brittany

Thank you for this post, it helped me tremendously.

Collapse
olawanle_joel profile image
Joel Olawanle Author

Thanks for reading!