Vue アプリケーションで axios を使用しているときに「Uncaught (in Promise) Error: Request failed with status code 400」が発生した場合はどうすればよいですか?

Vue アプリケーションのネットワーク リクエスト フレームワークとして axios を使用すると、通常、データの処理にはバックエンド API との通信が含まれます。ただし、場合によっては、「Uncaught (in Promise) Error: Request failed with status code 400」というエラーが発生することがあります。このエラーは通常、API をリクエストするときに発生し、リクエストは送信されたものの、データ形式またはパラメータが正しくないためにサーバーがリクエストを処理できないことを示します。

このエラーにはどう対処すればよいでしょうか?以下では、考えられる解決策をいくつか取り上げます。

1. API リクエストの URL とパラメータを確認する

まず、API リクエストの URL とパラメータをチェックして、API リクエストの要件を満たしていることを確認する必要があります。 API。この問題は通常、API のリクエスト時に間違ったパラメータまたは間違った URL が指定され、サーバーがリクエストを処理できなくなることが原因で発生します。

Chrome ブラウザの開発ツールを使用して、要求された URL とパラメータを表示し、それらが正しいかどうかを確認できます。

2. axios リクエスト ヘッダー ファイルを設定する

Vue アプリケーションでは、通常、axios プラグインを使用して HTTP リクエストを送信します。 API をリクエストするときにリクエスト ヘッダーに特定のパラメーターまたはヘッダー ファイルを設定する必要がある場合は、リクエスト ヘッダーが axios プラグインで正しく設定されていることを確認する必要があります。

axios.defaults.headers.common['Authorization'] = 'Bearer ' token;

上記のコードでは、Bearer トークンを Authorization に添付するリクエスト ヘッダーを設定します。

3. API リクエスト時に正しいデータ形式を送信する

アプリケーションでよく知られているデータ型は JSON です。 Vue アプリケーションでデータを処理するときは、データが JSON 形式でサーバーに送信されるようにする必要があります。他の形式 (フォーム データや XML 形式のデータなど) でデータを送信すると、サーバーが 400 エラーを返す場合があります。

Content-Type: application/json ヘッダーを使用して、データが JSON 形式で送信されるようにします。以下は、データ オブジェクトを JSON 形式でバックエンド API に送信する例です。

let data = { 名前: 'ジョン'、年齢: 30 };
axios.post('/api/user', JSON.stringify(data), { headers: { 'Content-Type ': 'application/json' } });

4. エラーを捕捉し、エラー メッセージを表示する

axios 応答インターセプターを使用して、エラーを捕捉し、エラー メッセージを表示できます。 Vue アプリケーションでは、main.js ファイルに axios インスタンスを作成し、応答インターセプターを追加できます。

次のコード スニペットでは、axios インスタンスに応答インターセプターを追加します。リクエストエラーが発生すると、レスポンスインターセプタのエラーハンドラが呼び出され、エラーメッセージが表示されます。

「axios」から axios をインポート;
「vue」から Vue をインポート;

let インスタンス = axios.create({
BaseURL: 'http://localhost:3000 ',
タイムアウト: 30000
});

instance.interceptors.response.use(関数 (応答) {
応答を返す;
}, 関数 (エラー) {
Vue.prototype.$message.error(error.message);
return Promise.reject(error);
});

上記のコード スニペットでは、Vue の $message を使用します。インスタンスを使用してエラー メッセージを表示します。

概要

Vue アプリケーションでは、通常、ネットワーク リクエスト ライブラリとして axios を使用します。 API をリクエストすると、「Uncaught (in Promise) Error: Request failed with status code 400」エラーが発生する場合があります。このエラーは通常、API リクエストの URL、パラメータ、リクエスト ヘッダー、データ形式をチェックする必要があることを示します。

この問題を解決するには、API リクエストの URL とパラメータを確認し、axios のリクエスト ヘッダー ファイルを設定し、正しいデータ形式を送信し、エラーをキャプチャしてエラー メッセージを表示することで問題を解決できます。

以上がVue アプリケーションで axios を使用しているときに「Uncaught (in Promise) Error: Request failed with status code 400」が発生した場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。