web-dev-qa-db-ja.com

コード内の1つの場所からのすべてのaxios呼び出しを記録する方法

反応アプリケーションにaxiosを使用していますが、アプリ内のどこで行っているすべてのaxios呼び出しをログに記録したいと思います。 create関数を介してすでにaxiosの単一のグローバルインスタンスを使用しており、汎用のconsole.logを記録できます。しかし、呼び出される関数、パラメータなどの詳細を知りたい.

reactjsaxios
36
David Choi

これを行う最善の方法はインターセプターです。各インターセプターは、要求/応答の前に呼び出されます。この場合、ロギングインターセプターはそうなります。

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

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

またはその効果のための何か。

Axiosの新しいインスタンスを使用しているのは良いことです。

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

こうすれば電話できます

api.interceptors[...]
69
Kevin Velasco

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

構成およびカスタマイズオプションについては、 ドキュメント を参照してください。

7
Dheeraj V.S.

「インターセプター」を使用してすべてのリクエストをインターセプトし、その中にログインできるようです： https://github.com/mzabriskie/axios#interceptors

2
Jeff McCloud

Promiseでaxios.request関数をラップしてみてください。

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