How to Wrap Axios Requests for JSON API (Bearer token)

Have you ever tried to use a JSON API with Axios is a Javascript library that offers features to execute HTTP requests using a promise-based architecture. Most prominent HTTP requests are GET, POST and PUT, and we have seen in here how you can execute these with cURL inside your terminal. Now it’s time to execute these requests in your own source code.

Table of contents

• What is an authenticated API?
• What is a JSON API?
• How to execute Axios JSON API Requests?
• Conclusion

What is an authenticated API?

An authenticated Application Programming Interface – short API – consists in a collection of endpoints, remote or self-hosted, that can be accessed only after successful authentication.

It is typical for web applications to require authentication (log-in) because this permits to secure the data of a program and make sure that it is never accessible outside the scope of a software.

What is a JSON API?

We refer to these types of API whenever the format of data that is required by an endpoint, or that is communicated to us, uses the Javascript Object Notation – short JSON – to represent entities and collections.

JSON has become very popular in web development due to its origin, the Javascript programming language. It is fairly simple to create JSON objects, an example is added below.

# Example of a JSON object
{
  "id": 123,
  "name": "Free Snippets Library",
  "web": "www.freeopensourc.es"
}

How to execute Axios JSON API Requests?

With axios installed and imported from inside your HTML, you can create a new empty file that you name api.js. This file will contain the implementation of a $api wrapper that you can use to execute your normal axios HTTP requests and function calls.

If you do not have axios installed yet, you can download it here.

import axios from 'axios';

window.url = "http://example.com";

// (1) wraps axios
const $api = axios.create({
  withCredentials: true,
  baseURL: window.url + '/api/v1'
});

// (2) adds interceptor to set headers
$api.interceptors.request.use((config) => {
  // (3) adds an Authorization header
  config.headers.Authorization = `Bearer YOUR_API_TOKEN`;

  // (4) configures JSON input/output
  config.headers.Accept = 'application/json';
  config.headers['Content-Type'] = 'application/json';

  return config;
});

// (5) export wrapped axios
window.$api = $api;
export default $api;

In the above free source code we implement an example axios JSON API wrapper starting with the import of the axios library and by defining a base URL to access the remote API.

(1) In this first step you define a wrapper around an axios instance that is created with axios.create and configured to enable credentials, and use the correct API base URL.

(2) Next, you must define so-called request interceptors, which are functions that are executed just before the HTTP request. This is the right place to configure request headers.

(3) The first request header added here is the Authorization header which can be used to forward authentication data such as Bearer API tokens. Make sure to replace YOUR_API_TOKEN here for a correct API token.

(4) The next two request headers determine the communication format that is used while performing the request and receiving a result. With these two headers set to application/json, we are telling the web server that we expect JSON as a result and also that we will send JSON data, if any.

(5) Lastly, you must export this wrapper instance so that you can use it from inside other files in your program. We used the commonjs module export format here with export default but we also added the hacky window trick to spare you some headaches.

Conclusion

You can use this above free source code to wrap your HTTP requests and configure them to accept JSON, or to authenticate your API client with a Bearer token.