如何将获取响应时间拦截器导入到Axios

Question

我导入的所有拦截器在 Axios 中都可以正常工作，但 getResponseTime 拦截器却不能。

NON WORKING EXAMPLE

假设我想管理拦截器并将其导入 Axios 怎么样？我想在单独的文件中定义它们

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
  }
)

然后我导入它们并按照给定示例中的方式使用它们

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

但是这些拦截器不能一起作为导入工作，我认为它们必须在 httpClient 文件中保持完整。请指教。它仅与 logResponseTimes 拦截器中断，其他工作正常。

//更新：根据@IVO GELOV，我尝试了一个参数，但仍然没有成功，我还移动了

responseTimeInterceptor

来请求，重构的代码如下所示：

// 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
}

Answer 1

尝试

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

根据我的测试（在here和here也得到了证实），“请求”拦截器总是以相反的顺序首先调用，而“响应”拦截器则以自然顺序随后调用（首先定义的是首先执行）。

在

requestTimeInterceptor

中你需要做类似的事情

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

在

logResponseTimeInterceptor

你需要做类似的事情

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