Working with APIs in Rails

//
3 min readJul 30, 2021

Building an API

What is an API?

An API is an application program interface. Using an API, you can intentionally expose information to the public. The public can use fetch requests to get the information.

Note: When working with APIs, serializers can help us control what information is exposed and how.

How do you create an API?

One way to create an API is to use a rails resource generator (rails g) and include the api flag ( — API). Using this flag ensures that you have the correct cors.rb, and erb files. It allows you to configure your application to start with a more limited set of middleware than normal, meaning it will not include any middleware used for browser applications. It generates without views, helpers, and assets.

What is CORS?

CORS is a middleware mechanism that allows for cross-origin HTTP requests. Once you generate a resource with the API flag, you should uncomment the gem rack CORS. Cross-origin here means any origin(domain, scheme, or port) other than its own from which a browser should permit the loading of resources.

What are serializers?

Serializers allow us to control what we want to display in our API. In other words, serializers allow us to structure the data we send back to clients appropriately. This way, when we request a user’s information, we get the data back that we want. With the help of serializers, we are able to send a standardized and formatted response to the API consumers (sometimes us, sometimes someone else) in a way they would be able to parse.

We can use serializers by installing the gem “activemodel serializer”. After we bundle install and create serializers, these will indicate the default structure for the relevant model when render is called in the controller.

Getting Data from an API

What is a fetch request?

A fetch request is used to send requests to the server and load information into webpages. The request can be of any API that returns the data in JSON or XML format. The fetch() method returns a promise that resolves into a Response object. A fetch request can be considered a modern, more efficient version of an XML HTTP Request, which allows you to make HTTP requests to servers from web browsers.

What is a promise?

A promise object represents the eventual completion or failure of an asynchronous operation and its resulting value. A promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action’s eventual success value or failure reason.

What is JSON?

JSON stands for Javascript Object Notation and is the format in which you exchange data to and from a web server.

What does the .json() function do?

This function takes a response stream and returns a promise which resolves with the result of parsing the body text as JSON. In a basic fetch request, as below, we use .json() to extract the json body content from the response object, since the response object is a representation of the entire HTTP response and is not the actual JSON response body.

What is the purpose of JSON.stringify()? What are some of the unsupported data types?

When sending data to a web server, the data has to be a string. The JSON.stringify() method converts a Javascript object or value to a JSON string. It optionally replaces values if a replacer function is specified of optionally includes only the specified properties if a replacer array is specified.

How does asynchronous code work in Javascript?

Asynchronous callbacks are functions that are specified as arguments when calling a function that will start executing code in the background. Asynchronous operations, like promises, are put into an event queue. An event queue runs after the main thread has finished processing so that it does not block subsequent Javascript code from running.

--

--