DEV Community: MutluDev

How Axios Processes Interceptors: Order Matters

MutluDev — Tue, 27 May 2025 13:00:00 +0000

If you’ve written any frontend app with authentication, you've probably used Axios interceptors. But have you ever thought about the order in which they run? I hadn’t, until I ran into a bug (or maybe a feature).

While setting up my refresh token logic, I created two request interceptors like this:

instance.interceptors.request.use(refreshTokenInterceptor);
instance.interceptors.request.use(authenticationTokenInterceptor);

refreshTokenInterceptor checks if the token is expired and, if it is, fetches a new one from the server and saves it to localStorage.

authenticationTokenInterceptor then takes the token from localStorage and attaches it to the request.

Well, when I tested it, the token was getting refreshed, but the request was still being sent with the old token. After a few console.logs, I figured out the issue: request interceptors run in reverse order to how they’re defined.

After a quick Google search, I found this is a known behavior in Axios:

Axios states that request interceptors are stack-based; they run like popping from a stack.

I'm still not sure if this is a bug or a feature, but it doesn’t look like it’ll change anytime soon. So next time you add more than one interceptor, keep this in mind.

Making git more productive with aliases

MutluDev — Thu, 27 Aug 2020 13:25:17 +0000

What is an alias

This would be a quick tutorial. If you ever checked your .bashrc file probably saw the alias keyword.
Creating alias in bash is like creating shortcut for command so instead of typing git status you can type gs and run the same command.

Creating new alias

Let's create an alias for git status command.

Open your .bashrc file, you can use any text editor
Add alias gs="git status" to end of the file
- Let's inspect our code
- alias - keyword
- gs - shortcut
- git status - full command

Example configuration that i use

alias gs="git status"
alias ga="git add -A"
alias gp="git push"

Ending

You can use aliases for every command. So be creative. If you find yourself typing the same command over and over again try making it shorter.
Thanks for reading this post.

Weird behaviors of javascript: Primitive Types and Reference Types

MutluDev — Wed, 19 Aug 2020 16:08:07 +0000

I recently learned a difference between Primitive types and Reference types.
I thought it would be great to write a blog post about this topic.

Let's start with a code snippet

let a = 1;
let b = a;

console.log(b); // 1

a = 2;

console.log(b); // 1

Well this looks okay let's do the same thing with an object

let a = {
  someText: 'Hello',
};

let b = a;

console.log(b); // { someText: "Hello" }

a.someText = 'Hi';

console.log(b); // { someText: "Hi" }

This performed unexpected isn't it?
You will understand why this happens by the end of this post, let's dive into it.

What are primitive and reference types

In Javascript, we have 6 primitive types

String
Number
Boolean
null
undefined
Symbols (ES6)

and 3 Reference types

Object
Array
Function

Primitive types

Primitive types stored in a fixed-sized memory,
so exact value of "a" stored in memory,
I think an example would be more helpful here

We created variable "a", it placed into memory like this

then we copied memory value of variable "a" to variable "b"

That seems okay let's see what happens with Reference types

Reference Types

Reference types are more complex and take up more space compared to Primitive types.
They can't be stored in fixed memory so they stored in a random location in memory
let's see it's diagram

Notice that the value stored in memory is not the real value itself, its reference to real value.
When we copy the variable "a" to "b" we copy the Memory value (Reference to real object). That's why they're called reference values.
When we copy the variable "a" we don't copy the real value, we copy reference to real value.

That's why "b" is also changed when we change the property of "a".

Source

https://github.com/leonardomso/33-js-concepts
- Section 3. Value Types and Reference Types

Thanks for reading

If you have any questions feel free to ask below.

Calculating Total Playlist Time With Vanilla Javascript

MutluDev — Wed, 15 Jul 2020 19:44:42 +0000

Where this idea comes from

I was hanging on the internet and I saw Corey Schafer's video Python YouTube API Tutorial: Calculating the Duration of a Playlist
and I thought, well

Each video has a duration on the bottom right corner, we can parse all of the durations and sum all of them

Selecting all videos using browser dom

I opened Inspector and started investigating

Each video has a class named ytd-playlist-video-renderer

We can parse all videos with document.querySelectorAll("ytd-playlist-video-renderer")

Now this selects all videos but we have to iterate over each video and get the just duration

we iterate over each video with forEach and using correct queries we will get the duration


document.querySelectorAll("ytd-playlist-video-renderer").forEach( (element) => {
    try{
        let timelist = element.querySelector("#overlays")
        .querySelector("ytd-thumbnail-overlay-time-status-renderer")
        .querySelector("span")
        console.log(timelist)
    } catch(err){
       console.log(err)
    }

})

Note

# symbol means class

I didn't use anything in front of some queries that means they are tag names like
<ytd-thumbnail-overlay-time-status-renderer>

Let's see the output

That's great, we get all span elements but were not done we need to get raw duration.

Now if we select child and data of the child our code becomes

document.querySelectorAll("ytd-playlist-video-renderer").forEach( (element) => {
    try{
        let timelist = element.querySelector("#overlays")
        .querySelector("ytd-thumbnail-overlay-time-status-renderer")
        .querySelector("span")
        .firstChild.data.trim().split(':')
        console.log(timelist)
    } catch(err){
       console.log(err)
    }

})

You can see that I used trim() because there is a lot of whitespace around these strings

and I used split(':') this will help us when we calculating total time.

Now we got everything we need to calculate total time lets calculate the total time

Calculating total duration

I will create an object on the top of our code to store total duration,
we will increment the total duration on every video.

I just added this on top of our code and were ready to go.

let totalTime = {
    seconds:0,
    minutes:0,
    hours:0
}

You remember we split durations in the previous section.

I want to check if the array size is 2 or 3 if it is 3 that means we have the hour section

if(timelist.length == 2){
    totalTime.minutes += parseInt(timelist[0])
    totalTime.seconds += parseInt(timelist[1])
} else if (timelist.length == 3){  
    totalTime.hours += parseInt(timelist[0])
    totalTime.minutes += parseInt(timelist[1])
    totalTime.seconds += parseInt(timelist[2])
}

See how I added minutes and seconds in size 2 and hours, minutes, and seconds in size 3.

We have the total hours minutes and seconds but it isn't in the correct format,
I mean we have them but they're like this

hours: 1

minutes: 465

seconds: 342

Yeah, we have to calculate this, fortunate of us this is not that hard.

totalTime.minutes += parseInt(totalTime.seconds/60)
totalTime.seconds = totalTime.seconds % 60

totalTime.hours += parseInt(totalTime.minutes/60)
totalTime.minutes = totalTime.minutes % 60
console.log(totalTime)

We divided seconds by 60 and added this to minutes
then we set seconds to remainder

We did the same thing for hours and minutes

Our final code looks like this

let totalTime = {
    seconds:0,
    minutes:0,
    hours:0
}

document.querySelectorAll("ytd-playlist-video-renderer").forEach( (element) => {
    try{
        let timelist = element.querySelector("#overlays")
        .querySelector("ytd-thumbnail-overlay-time-status-renderer")
        .querySelector("span")
        .firstChild.data.trim().split(':')

        if(timelist.length == 2){
            totalTime.minutes += parseInt(timelist[0])
            totalTime.seconds += parseInt(timelist[1])
        } else if (timelist.length == 3){  
            totalTime.hours += parseInt(timelist[0])
            totalTime.minutes += parseInt(timelist[1])
            totalTime.seconds += parseInt(timelist[2])
        }
    } catch(err){
       console.log(err)
    }

})

totalTime.minutes += parseInt(totalTime.seconds/60)
totalTime.seconds = totalTime.seconds % 60

totalTime.hours += parseInt(totalTime.minutes/60)
totalTime.minutes = totalTime.minutes % 60
console.log(totalTime)

Where can you run this code

I mentioned Inspector a few minutes ago, we can use Inspector to run commands on the current page.

Right-click somewhere on the page and select Inspect Element you will see something like that on the bottom of the page

At the top of that box there is a section named Console select this section, paste the code, and press enter.

You have to see something like this

Some problems

There is a little problem with this approach if we have a large playlist, like 50 videos, youtube
will not load all videos so we wouldn't be able to calculate time correctly, we have to scroll to the bottom
to load all videos and then run the code