CODEWITHSUNDEEP
vue.jsaxiosinterceptor
Simon Klimek
Simon Klimek

Reputation: 352

How to import get response times interceptor to Axios

All my imported interceptors work fine in Axios, but getResponseTime interceptor doesn't.

NON WORKING EXAMPLE

What about just to assume the case I want to manage and import interceptors to Axios. I'd like to define them in separate file logTimeInterceptor.js:

export const responseTimeInterceptor = (response) => {
  // to avoid overwriting if another interceptor
  // already defined the same object (meta)
  response.meta = response.meta || {}
  response.meta.requestStartedAt = new Date().getTime()
  return response
}


export const logResponseTimeInterceptor = ((response) => {
    // Logs response time - only for successful requests
    console.log(
      `📡 API | Execution time for: ${response.config.url} - ${
        new Date().getTime() - response.config.meta.requestStartedAt
      } ms`
    )
    return response
  },
  // Support for failed requests
  // Handle 4xx & 5xx responses
  (response) => {
    console.error(
      `📡 API | Execution time for: ${response.config.url} - ${
        new Date().getTime() - response.config.meta.requestStartedAt
      } ms`
    )
    throw response
  }
)

Then I import them and I use them in the way in a given example of httpClient.js:

import axios from 'axios'
import { ApiSettings } from '@/api/config'
import {
  responseTimeInterceptor,
  logResponseTimeInterceptor
} from '@/api/interceptors/logTimeInterceptor'

// ==============    A P I   C L I E N T    =============
const httpClient = axios.create(ApiSettings)

// ============== A P I   I N T E R C E P T O R S =============
httpClient.interceptors.request.use(authInterceptor)
httpClient.interceptors.response.use(
  responseTimeInterceptor,
  logResponseTimeInterceptor,
)

export default httpClient

But those interceptors don't work as imports together, and I think they has to stay intact in httpClient file. Please advise. It only breaks with logResponseTimes interceptor, the others work fine.

// UPDATE: According to @IVO GELOV I tried with one argument but still with no success, also I moved responseTimeInterceptor to request, the refactored code looks as follows:

// httpClient.js
httpClient.interceptors.request.use(responseTimeInterceptor)
httpClient.interceptors.response.use(logResponseTimeInterceptor)
httpClient.interceptors.response.use(logResponseErrorTimeInterceptor)

responseTimeInterceptor.js

export const responseTimeInterceptor = (response) => {
  // to avoid overwriting if another interceptor
  // already defined the same object (meta)
  response.meta = response.meta || {}
  response.meta.requestStartedAt = new Date().getTime()
  return response
}

export const logResponseTimeInterceptor = (response) => {
  // Logs response time - only for successful requests
  console.log(
    `📡 API | Execution time for: ${response.config.url} - ${
      new Date().getTime() - response.config.meta.requestStartedAt
    } ms`
  )
  return response
}

export const logResponseErrorTimeInterceptor = (response) => {
  // Support for failed requests
  // Handle 4xx & 5xx responses
  console.error(
    `📡 API | Execution time for: ${response.config.url} - ${
      new Date().getTime() - response.config.meta.requestStartedAt
    } ms`
  )
  throw response
}

Upvotes: 1

Views: 583

Answers (1)

stillwaiting
stillwaiting

Reputation: 474

Try

httpClient.interceptors.request.use(authInterceptor);
httpClient.interceptors.request.use(requestTimeInterceptor);
httpClient.interceptors.response.use(logResponseTimeInterceptor);

According to my testing (which is also confirmed here and here), "request" interceptors are always called first in the reverse order, while "response" interceptors are called after that in the natural order (what's defined first is executed first).

In requestTimeInterceptor you'd need to do something like

(reqConfig) => {
        reqConfig["started"] = Date.now();
        return reqConfig;
 }

in logResponseTimeInterceptor you'd need to do something like

(res) => {
        const duration = Date.now() - res.config["started"];
        ...
}

Upvotes: 0

Related Questions