Making API Request With Authorization Header

In this article we are going to learn how to make API request with authorization header in JavaScript.

The purpose of this tutorial is to learn how to make API calls with authorization header. If you are not familiar with JavaScript don’t worry as this article will provided a step to step guide.

Pre-requisites

• Basic JavaScript knowledge.
• Basic npm/npx/yarn knowledge.

API

Application programing interface mostly referred to as API enables easy transfer of information from one server or endpoint to the other on the fly.

Think of API as a waiter in a coffee hotel who you make an order to and serves you coffee.

For this project we are going to use the pexels api . This api requires authentication header for any request made to their endpoints. Register here to get a unique api key for yourself.

For our case we will be using the url/endpoint below.

https://api.pexels.com/v1/search?query=car&per_page=80

We will look at two various ways to make http requests using both Fetch and Axios.

Using Fetch

One of the best features of fetch is that it provides an easy method to fetch data asynchronously from an api endpoint.

Fetch method takes the syntax below.

fetch('url/api endpoint',{headers,options,body})
.then((res)=>
handle response)
.catch((error)=>{
handle error
})

Fetch request by default is always GET without specifying the option. Other options include POST, DELETE and PUT.

For us to make requests with headers, fetch requires the headers to be included in the options parameter. We can do so as follows.

fetch('url/api endpoint', {  headers: {” Authorization”:”api key here” }})
.then(res)=>res.json()
.then(data=>{
console.log(data)
}
.catch((error)=>{
console.log(error)
})

We will need to convert the response into JSON format since the body of the response requires a JSON format.

Some endpoint requires the body to be in either of the following forms.

• response.text()
  
• response.arrayBuffer()
  
• response.blob()
  
• response.formData()

Using Axios

Axios is a library that is used to make promise based HTTP client for the browser and node.js. It is used for the same purpose as fetch.

Features of axios includes:

• Make XMLHttpRequests from the browser
• Make http requests from node.js
• Supports the Promise API
• Intercept request and response
• Transform request and response data
• Cancel requests
• Automatic transforms for JSON data
• Client side support for protecting against XSRF

To install axios, use the following commands

Using npm:

$ npm install axios

Using bower:

$ bower install axios

Using yarn:

$ yarn add axios

To performs a GET request we use the approach below.

First we require the library first

const axios = require('axios');

// Make a authorization header request.
axios.get('url',{headers:{“Authorization”:"api-key goes here"}})
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  });

Optionally we can use async await as follows

// Add the async keyword to your outer function/method.
async function getRequest() {
  try {
    const response = await axios.get('url/api endpoint',{ headers:{“Authorization”:"api-key goes here”}});
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Conclusion

Fetch and Axios makes it easier to make http request to api endpoint and swift transfer of information across servers.

Just a recap of what we have learnt:

• How to make request to api endpoints (fetch and axios)

• How to include header in our requests

• How to handle and catch errors

• How to make asynchronous request using async await

I have also prepared a video tutorial on how to make header request, you can check it here.

Thank you for reading this article if you found it helpful please share and leave a comment down below.

Untill next time PEACE.