How to integrate APIs in Javascript | A Complete Guide

On a typical day, Alice, a waiter at a restaurant, serves customers their orders. An example of an order they might receive is: “Alice, can I have a caffè latte with no sugar, please?” Alice would then take the order to the kitchen. The chef, working in the kitchen, prepares the order and hands it over to Alice, who serves it to the customer. This simple interaction shows how effective communication between different roles (waiter, chef, and customer) is essential for smooth order fulfillment.

Similarly, in software development, an application programming interface (API) is a software gateway that allows different software components to communicate with each other. APIs help expose the capabilities of an application to the outer world, allowing for programmatic access to the application’s data.

Consider the case of an application providing stock or weather information. Building and exposing an API for such systems will allow others to programmatically fetch the data offered by these systems, such as weather forecasts for the provided location. The same example can be extended to various other use cases. Commonly used services such as YouTube, Reddit, Google Maps, and others provide APIs, allowing authorized clients to access their resources using API integration. We can also relate this to the restaurant analogy above in the following way:

• The customers are software applications/clients requesting a service.

• Alice, the waiter, is the API acting as the interface between the clients and the backend services.

• The kitchen and chef are analogous to downstream services, including the serving application and the persistence layer.

Over the years, APIs have evolved and have acquired some features that make them even more efficient and useful. Modern APIs conform to HTTP standards, which makes them developer-friendly and easy to consume.

Representational state transfer (REST) is a web architecture style introduced in 2000 to address the web’s exponential scalability problem. REST requires a server to fulfill a client’s request by providing a representation of the resource, which contains links to change the system’s state and acquire the representation of newer resources. The REST architecture style is derived from architecture constraints, such as client-server communication, cacheability, statelessness, and others, and forms the basis of the modern internet.

APIs based on REST architecture are aptly called RESTful APIs. They commonly use HTTP as the underlying protocol, with HTTP methods (GET, POST, PUT, DELETE) for managing resources.

At Educative, we have a diverse catalog of interactive and hands-on courses on APIs, including the design of APIs and how to integrate APIs in JavaScript and Python. For instance, the course below provides hands-on expertise on consuming data from Api-Football, a great resource for any application consuming soccer-related data.

HTTP requests in JavaScript#

Let’s start with runnable code to fetch a random recipe from TheMealDB, an open, crowd-sourced database of recipes. Don’t worry if you don’t understand the example completely at this stage; we are here to guide you through it.

Before going further, let’s briefly discuss the highlighted lines in the code above. We first provide the endpoint URL and then use the Fetch API for making HTTP GET request to the endpoint. We have defined some helper functions in lines 16–32 to print the formatted response and any errors encountered.

In this blog, we’ll focus on using the Fetch API for making HTTP requests; however, other options also exist. One of the most popular third-party libraries is axios. When working with axios, the concepts in this blog can be very useful. In the code above, we used one of Educative’s feature-rich widgets, SandPack, to run the code. The same widget can be used to run all major JS-based frontend technologies. Although we won’t focus on the axios library in this blog, an example of how to use axios in a React application is shown below.

Now that we have a basic idea about HTTP requests, let’s focus on the core concepts. We start with some background on endpoints and HTTP methods.

Endpoints and HTTP methods#

In bidirectional communication, an endpoint represents one end of the communication, essentially specifying how to reach the API using a URL. A client can send requests to an endpoint to retrieve resources or perform operations. The illustration below shows that endpoints have two parts: the base URL and the endpoint name.

Manipulating data with CRUD operations is a common requirement. For instance, when working with an SQL database, we utilize insert, select, update, and delete operations. Likewise, when interacting with REST applications, CRUD operations are frequently involved and are supported by HTTP methods.

Let’s consider the example case of an API to manage courses using an API endpoint named courses. The table below presents the use of HTTP methods:

Before moving forward, let’s revisit the code shown earlier and see how we can specify the HTTP method with the Fetch API.

When calling the fetch() method, we need to specify the endpointUrl and optionally, an object to specify other settings, in this case, the HTTP method to use. We have commented out some code representing some settings and excluded the presentation of others, such as mode and credentials. To better understand these settings, let’s discuss the possible parameter types.

Parameters types#

There are four important types of parameters we need to deal with when making API calls:

• Header parameters: Parameters included in the request header.

• Path parameters: Parameters within the path of an endpoint that typically appear after /.

• Query string parameters: Parameters in the query string of the endpoint, normally after ?.

• Body parameters: They contain data sent by the client to the server, providing additional information for processing the request. They are typically used with POST, PUT, and PATCH methods.

All is now set for putting this knowledge into practice. We’ll consider the case of making requests to an API to manage courses.

GET details of a specific course#

We have already seen the code for making HTTP GET requests. However, for completion and for the use case of making a course catalog, we are using a path parameter 100 to get the details of a specific course.

Handling POST to add a new course#

To add a new course to our collection, we’ll use the same /courses endpoint. This time, we’ll use the POST method with this endpoint. We also need to pass body parameters with the request to add a new course. The code widget below is for the course catalog use case.

PUT an updated version#

We can use the HTTP PUT method to update the resource (and PATCH for partially updating it). Let’s take a moment to figure out how this can be done. First, how the endpoint has been designed, /courses/:id gives us a clue about the endpoint URL. We need to specify a course’s ID as a path parameter to update it.

We need to, of course, specify PUT as the HTTP method to use. In addition, we need to provide the course information as a body parameter. The complete code is as follows:

DELETE a specific course#

Let’s conclude this blog by discussing how to delete a course. Again looking at how the endpoint has been designed, /courses/:id gives us a clue about the endpoint URL. We need to specify a course's ID as a path parameter to delete it. We need to use DELETE as the HTTP method. One important thing to note and follow is that the body parameters are not sent with the DELETE request. The complete code is as follows:

Conclusion#

This blog has provided a detailed guide on how to integrate APIs in JavaScript. We started by making an HTTP GET request using the Fetch API to fetch a random recipe from TheMealDB, an open, crowd-sourced database of recipes.

We then detailed the various related concepts and used a custom API to discuss using HTTP POST, PUT, and DELETE methods to manage resources. This blog focused on RESTful APIs; however, other API architecture styles, including GraphQL and gRPC, have their strengths and use cases. We encourage you to explore them further. 

Finally, we leave you with a demo of using Educative’s API widget to invoke different endpoints of our example API.