Vue Axiosで「ネットワークエラー」をキャプチャして処理する方法

VUE Axiosで「ネットワークエラー」の問題をキャッチおよび処理する：エラー処理関数の定義：ロギングエラーログやフレンドリーなエラーメッセージの表示などのネットワークエラーを処理する関数を作成します。応答インターセプターを使用してエラー処理関数を追加します。Axiosの応答インターセプターを使用して、Axiosインスタンスにエラー処理機能を追加します。インターセプターは、状態に関係なく、各応答が発行された後にエラーをキャッチします。

Vue Axiosで「ネットワークエラー」をキャプチャおよび処理します

質問： Vue Axiosで「ネットワークエラー」をキャッチして処理する方法は？

答え：

ステップ：

1. エラー処理機能を定義します。

    <code class="js">const errorHandler = (e) => { // 处理错误};</code>

2. 応答インターセプターを使用して、エラーハンドラーを追加します。

    <code class="js">axios.interceptors.response.use( (response) => response, (error) => errorHandler(error) );</code>

詳細：

• 応答インターセプター：応答インターセプターは、発行後、エラー応答を含むAxios応答をキャプチャできます。
• エラーハンドラー関数：この関数は、ネットワークエラーの処理に責任があります。フレンドリーなエラーメッセージを表示したり、ログエラーログをログにしたり、他の必要なアクションを実行したりできます。

例：

 <code class="js">const errorHandler = (e) => { if (e.response) { // 请求已发送，服务器响应了状态代码console.error(e.response.data); console.error(e.response.status); console.error(e.response.headers); } else if (e.request) { // 请求已被发送，但没有收到服务器响应console.error(e.request); } else { // 发生了其他错误，可能是由于设置请求时出错console.error(e.message); } console.error(e.config); }; axios.interceptors.response.use( (response) => response, (error) => errorHandler(error) );</code>

このコードは、すべてのネットワークエラーをキャプチャし、それらをコンソールにログに記録します。特定のニーズを満たすために、必要に応じてerrorHandler機能を調整できます。

以上がVue Axiosで「ネットワークエラー」をキャプチャして処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。