Making API requests with React
Hi all!🤗, In this article I am going to give you a quick guidance to make API requests with React.
First of all we have to know about what is an API?
An Application Programming Interface is a computing interface which defines interactions between multiple software intermediaries. It defines the kinds of calls or requests that can be made, how to make them, the data formats that should be used, the conventions to follow and so on.
In here I am going to load some data from Unsplash API to my react App. Unsplash API is a modern JSON API that surfaces all of the info you’ll need to build any experience for users.In order to use Unsplash API, first thing you have to do is register as a developer in Unsplash API.(unsplash.com/developers)After the registration,go to your apps and create a new application.
The React App is not going to make network request to Unsplash API itself . We need separate piece of code in-order to do that. In here we have two options to do it.
- axios- standalone third party package,can easily install using npm
- fetch -function built in to modern browsers
But axios is most suitable for that situation. Because fetch is a low level function having lot of codes that has already written in axios. In my case I use axios.
To install axios paste following code in your terminal and hit enter.
npm install — save axios
After installing axios go to vscode and insert following code snippet to your App.js file.
Keep in mind, The Unsplash API is required Authorization “A” and Client-ID “C,ID” in uppercase.And make sure to import ,
import axios from “axios”;
To authenticate requests in this way, pass your application’s access key via the HTTP Authorization header.(You can find your access key from under Unsplash API — >your projects.)The above get function is going to take two separate arguments. The first one is going to be the address that we want to make request to.And the second argument is going to be an object that will have a bunch of options that will customize this request.
[For further information read :-https://unsplash.com/documentation]
In order to get little notification when the request is completed we have two different options.when we make request with axios it returns a object called promise.A promise is a object that gives us a simple notification when some amount of work like network request is completed. The first option is add .then () function as shown in bellow.
The second option is marked the onSearchSubmit() function as an async function.Then we can use async await syntax inside of the function.
Now we want to set the response as our component state.First we have to initialize our state at the top of our class.
The above code snippet is end up with an error.
To correct this error we can use following code snippet.
Now you can see the final output as bellow.
You can find the full code in my github repository.
That is all for today. Hope you get a clear understand about making API request with react using axios.Wish to meet you soon. Till then
Stay Safe and code happily.🤩
