Vue3はフロントエンドのログを出力するためにaxiosインターセプターを使用する

1. はじめに

多くの場合、フロントエンドをデバッグする必要があります。つまり、フロントエンドとバックエンドのインターフェース間の相互作用をデバッグする必要があります。一般的な方法は、 console.log (「ログ コンテンツ」) などのログを記録することです。

この方法は、実際には単一のメソッドの場合は問題ありませんが、複数のインターフェースとメソッドの場合は、このデバッグ方法は少し悪くなります。また、メソッドには実行順序があり、デバッグに影響する場合があります。

2. axiosインターセプターを使用してフロントエンドログを出力する

これはより推奨される方法です。つまり、一度記述すれば、常にconsole.logを書き込む必要はありません。

突然、テストをするときによく見かける文章を思い出しました。

すべてはテスト次第

この文を言い換えると、デバッグがすべてだということです。

1. main.tsを変更する

main.ts を変更し、次のコンテンツを追加します。

html
/**
 * アクシオスインターセプター */
axios.interceptors.request.use(関数 (config) {
  console.log('リクエストパラメータ:', config);
  設定を返します。
}, エラー => {
  Promise.reject(error) を返します。
});
axios.interceptors.response.use(関数 (response) {
  console.log('結果を返します:', response);
  応答を返します。
}, エラー => {
  console.log('エラーを返します:', error);
  Promise.reject(error) を返します。
});

2. ホーム内のすべてのconsole.logを削除します。

3. 再コンパイルしてやり直す

以下のように結果を確認してください。

これで、Vue3 で axios インターセプターを使用してフロントエンド ログを出力する方法についての説明は終わりです。Vue3 で axios インターセプターを使用してフロントエンド ログを出力する方法についてさらに詳しく知りたい場合は、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。