How to abort API requests in JavaScript

Abubakar Sadiq Sirajo — Mon, 30 May 2022 03:29:12 +0000

Different reasons; to authenticate user credentials, fetch resources, create resources, and so much more.

Did you know that you can abort an API request in JavaScript? By aborting, I mean canceling a request before it is completed (before you get a response or before the request gets to the server).

There are many reasons why you may want to do this. One of them is to prevent a request from being sent to the server if the user has already navigated away from the page the request was made.

Canceling requests can help you avoid unnecessary network traffic, save memory usage and resources, and improve performance.

There are many ways to make API requests in JavaScript. In this article, I'll focus on fetch and axios.

So how do you do abort requests in these methods?

The AbortController Interface

The Web API exposes the AbortController interface, a JavaScript object that allows you to abort requests whenever you want. Here is how to create an AbortController object:

const controller = new AbortController()

This controller object has two important properties for aborting requests.

The first property is the signal object. This object is a unique identifier for the request. The structure of this object is as follows:

{
  // other properties
  aborted: false,
  onabort: null
}

The second property is a method called abort(). This method is used to update the aborted flag of the unique request signal. When this method is called, all observers of the signals object will be notified, and the requests will be canceled.

When the abortRequest function is called at any point in your application (such as a button click event, for example), the abort method is called, the abortSignal object will be updated, and all observers will be notified.

Now let's see how to use this in fetch and axios.

Aborting API Requests in Fetch

The fetch method is a JavaScript function used to make API requests. It takes two arguments: the URL of the API endpoint and an object containing the request options:

fetch(api, requestOptions)

The requestOptions object accept a many properties, but the most important is the signal property. You can then attach the signal object from the controller to this property:


const controller = new AbortController()

const abortSignal = controller.signal

function abortRequest() {
  controller.abort()
}

fetch("api", {
  signal: abortSignal,
})

With this, when the abortRequest function is called, the fetch expression will be notified, and the request will be canceled.

Aborting API Requests in Axios

Axios is a JavaScript library that is used to make API requests. It has a very similar syntax to the fetch method. It also accepts a signal property in the request options object. So we can also attach the signal object from the controller like this:


const controller = new AbortController()

const abortSignal = controller.signal

function abortRequest() {
  controller.abort()
}

axios.get("api", {
  signal: abortSignal,
})

When the aborted flag of the signal object is updated to true, this axios expression will be notified, and the request will be canceled.

Even for new methods of making API requests, by accepting a signal property in their request options object, you can abort requests using the abort() method.

What was your first language as a Software developer

Abubakar Sadiq Sirajo — Sun, 17 Apr 2022 17:23:40 +0000

UPDATE > MariaDB

Abubakar Sadiq Sirajo — Sun, 17 Apr 2022 17:19:12 +0000

The UPDATE command helps us to change or modify the records that have already been inserted into a table. You can combine it with the WHERE clause to specify the record that is to be updated. Here is the syntax:

UPDATE tableName SET field=newValue, field2=newValue2,...  
[WHERE ...]

The UPDATE command can also be combined with clauses such as SET, WHERE, LIMIT, and ORDER BY. You will see this shortly:

Let’s change the price of the book with an id of 1 from 200 to 250:

UPDATE price 
SET price = 250
WHERE id = 1;

Python string | swapcase()

Abubakar Sadiq Sirajo — Fri, 15 Apr 2022 10:34:23 +0000

The string swapcase() method converts all uppercase characters to lowercase and vice versa of the given string and return it.

Syntax:

string_name.swapcase()

Here string_name is the string whose case are to be swapped.

Parameter:The swapcase() method does not take any parameter

Return value:
The swapcase() method returns a string with all the case changed.

Below is the python implementation of the swapcase() method

# Python program to demonstrate the use of
# Swapcase() method

string = "wORldGREAtestday"

# Print after swapping all case 
print(string.swapcase())

string = "python"
print(string.swapcase())

Output:

WorLDgreaTESTDAY
PYTHON