vue が Axios を使用してデータをリクエストする方法 (手順)

Vue は、Web アプリケーションのフロントエンド インターフェイスの構築に使用できる人気のある JavaScript フレームワークです。 Axios は、GET、POST などの HTTP リクエストを処理できる人気のある JavaScript ライブラリです。

Vue アプリケーションで Axios を使用してデータをリクエストするのは非常に簡単です。基本的な手順は次のとおりです:

1. Axios のインストール

まず、Vue アプリケーションに Axios をインストールします。npm コマンドを使用できます:

npm install axios

Install完了したら、Vue アプリケーションに Axios をインポートします。

import axios from 'axios';

2. GET リクエストの送信

基本的な GET リクエストを送信するには、Axios の get## を使用できます。 ＃方法。以下に例を示します。

axios.get('/users').then(response => {
  console.log(response.data);
});

これにより、URL

/users を使用して GET リクエストがサーバーに送信され、応答が成功すると応答データが出力されます。

POST リクエストの送信

POST リクエストを送信するには、Axios の

post メソッドを使用できます。以下に例を示します。

axios.post('/users', {
  name: 'John Doe',
  email: 'john@example.com'
}).then(response => {
  console.log(response.data);
});

これにより、URL

/users を使用してサーバーに POST リクエストが送信され、応答が成功すると応答データが出力されます。リクエストデータはオブジェクトにラップされます。

他のタイプのリクエストの送信

GET リクエストと POST リクエストに加えて、Axios は PUT、DELETE などの他のタイプのリクエストもサポートします。対応するメソッドを使用して送信できます。例:

axios.put('/users/1', {
  name: 'Jane Doe',
  email: 'jane@example.com'
}).then(response => {
  console.log(response.data);
});

axios.delete('/users/1').then(response => {
  console.log(response.data);
});

これにより、PUT リクエストと DELETE リクエストがそれぞれ送信され、応答の後に応答データが出力されます。

エラーの処理

リクエストを送信すると、ネットワーク障害やサーバーエラーなどのエラーが発生する可能性があります。エラーは、Axios の

catch メソッドで処理できます。

axios.get('/users').then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error.response.data);
});

これは、リクエストが失敗したときにエラー応答データを出力します。エラー応答データは成功応答データと等しくないことに注意してください。たとえば、404 Not Found 応答はエラー応答とみなされます。

概要:

Axios は、HTTP リクエストを処理するための非常に便利な JavaScript ライブラリです。リクエストを送信するためのいくつかの方法が提供されており、Vue アプリケーションと簡単に統合できます。 Vue アプリケーションで Axios を使用してデータをリクエストする場合は、上記の手順に従います。

以上がvue が Axios を使用してデータをリクエストする方法 (手順)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。