So protokollieren Sie alle Axios-Anrufe von einer Stelle im Code


71

Ich verwende Axios für eine Reaktionsanwendung und möchte alle Axios-Anrufe protokollieren, die ich an einer beliebigen Stelle in der App tätige. Ich verwende bereits eine einzelne globale Instanz von Axios über die Funktion create und kann ein generisches console.log protokollieren. Ich möchte jedoch mehr Informationen wie aufgerufene Funktion, Parameter usw.

Antworten:


151

Der beste Weg, dies zu tun, wäre ein Abfangjäger. Jeder Interceptor wird vor einer Anfrage / Antwort aufgerufen. In diesem Fall wäre ein Protokollierungsabfangjäger.

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

oder etwas in diesem Sinne.

Es ist gut, dass Sie eine neue Instanz von Axios verwenden:

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

Auf diese Weise können Sie anrufen

api.interceptors[...]

1
Es wird erwähnenswert sein, dass ohne das return responseder Code am Abfangjäger brechen wird
Oniya Daniel

4
Was zum Teufel ist api.interceptors[...]?
Georgii Oleinikov

2
In api.interceptors[...]ist der [...]Teil der zuvor demonstrierte Code. Sie wollten einfach nicht tippen api.interceptors.request.use...und api.interceptors.response.use...die Antwort erneut eingeben.
FirstOne

1
Ich bekomme Type Error: Cannot read property request of undefinedin ersten requestStichwörtern von api.interceptors.request.use(request => { console.log('Starting Request', request) return request }). Wie behebe ich diesen Fehler?
Jerry Chong

Wie kann ich dafür sorgen, dass diese Interceptors nur während der Entwicklung und nicht im Release-Modus funktionieren?
Satyam

15

Verwenden axios-debug-log

  1. npm install --save axios-debug-log
  2. require('axios-debug-log') vor jedem Axios-Anruf
  3. Legen Sie die Umgebungsvariable fest DEBUG=axios

Standardmäßig werden folgende Protokolle angezeigt:

  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

Informationen zu Konfigurations- und Anpassungsoptionen finden Sie in den Dokumenten .


Hallo, ich wollte fragen, wo kann ich das sehen? ist es in der Datei? axios POST / api / auth / login + 0 ms axios 200 (POST localhost: 8080 / api / auth / login ) + 125 ms axios POST / api / foo + 0 ms axios 200 (POST localhost: 8080 / api / foo ) +
15 ms


2

Sie können versuchen, die axios.requestFunktion in ein Versprechen einzuschließen.

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


Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.