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));
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.
Top comments (4)
Thank you for this post, it helped me tremendously.
Thanks for reading!
Good I like it ð
Thank you, great idea. I am going to add to my portfolio.