如何在代码中从一个地方记录所有axios调用


71

我将axios用于React应用程序,我想记录我在应用程序中任何位置进行的所有axios调用。我已经通过create函数使用axios的单个全局实例,并且能够登录通用console.log。但是我想要更多的信息,例如调用函数,参数等。

Answers:


151

最好的方法是拦截器。在请求/响应之前调用每个拦截器。在这种情况下,将使用日志拦截器。

axios.interceptors.request.use(request => {
  console.log('Starting Request', JSON.stringify(request, null, 2))
  return request
})

axios.interceptors.response.use(response => {
  console.log('Response:', JSON.stringify(response, null, 2))
  return response
})

或类似的东西。

使用新的axios实例很好:

const api = axios.create({
  timeout: 1000
})

这样你可以打电话

api.interceptors[...]

1
这将是值得一提的,如果没有return response,代码将在拦截器打破
Oniya丹尼尔

4
到底是api.interceptors[...]什么?
Georgii Oleinikov,

2
在中api.interceptors[...],该[...]部分是先前演示的代码。他们只是不想输入,api.interceptors.request.use...然后api.interceptors.response.use...再次输入答案。
FirstOne

1
我输入的Type Error: Cannot read property request of undefined第一个request关键字api.interceptors.request.use(request => { console.log('Starting Request', request) return request })。如何解决这个错误?
杰里·庄

我如何才能使这些拦截器仅在开发期间工作而不在发布模式下工作?
萨蒂扬

15

采用 axios-debug-log

  1. npm install --save axios-debug-log
  2. require('axios-debug-log') 在任何axios呼叫之前
  3. 设置环境变量 DEBUG=axios

默认情况下,您将看到类似以下的日志:

  axios POST /api/auth/login +0ms
  axios 200  (POST http://localhost:8080/api/auth/login) +125ms
  axios POST /api/foo +0ms
  axios 200  (POST http://localhost:8080/api/foo) +15ms

有关配置和自定义选项,请参阅文档


嗨,我想问我在哪里可以看到?在文件中吗?axios POST / api / auth / login + 0ms axios 200(POST本地主机:8080 / api / auth / login)+ 125ms axios POST / api / foo + 0ms axios 200(POST本地主机:8080 / api / foo)+ 15ms
TechDev


2

您可以尝试将axios.request函数包装在Promise中。

function loggedRequest(config) {
  return new Promise((resolve, reject) => {
    axios.request(config)
    .then((res) => {
      // log success, config, res here
      resolve(res);      
    })
    .catch(err => {
      // same, log whatever you want here
      reject(err);
    })
  })
}


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.