vue フロントエンドはバックエンド インターフェイスをどのように呼び出しますか?

Vue フロントエンドがバックエンド インターフェイスを呼び出す手順: Axios ライブラリをインストールし、Axios クライアントを作成し、HTTP リクエストを送信します: GET、POST、PUT、DELETE など。応答データを処理します。 : エラー情報を処理するには、.then() を使用します。: .catch () を使用します。

Vue フロントエンドがバックエンド インターフェイスを呼び出す方法

Vue フロントエンドからバックエンド インターフェイスを呼び出すには、次の手順に従います:

1. Axios ライブラリの使用

Axios は、バックエンド インターフェイスとの通信を簡素化する、人気のある JavaScript HTTP クライアント ライブラリです。

2. Axios のインストール

Vue プロジェクトに Axios をインストールします:

<code class="bash">npm install axios</code>

3. Axios クライアントを作成します

Axios インスタンスの作成:

<code class="javascript">import axios from 'axios';

// 创建 Axios 客户端
const client = axios.create({
  baseURL: 'http://localhost:3000/api', // 你的后端 API 基 URL
});</code>

4. HTTP リクエストの送信

Axios クライアントを使用して HTTP リクエストを送信:

<code class="javascript">// GET 请求
client.get('/users').then((response) => {
  // 处理响应数据
});

// POST 请求
client.post('/users', { name: 'John Doe' }).then((response) => {
  // 处理响应数据
});

// 其他 HTTP 方法（PUT、DELETE 等）的使用方式类似</code>

5. 応答の処理

サーバーが応答すると、Axios クライアントは応答データとメタデータを含む Promise を返します。 .then() を使用してレスポンスを処理できます:

<code class="javascript">client.get('/users').then((response) => {
  // 响应数据存储在 response.data 中
  console.log(response.data);
});</code>

6. エラー処理

リクエストが失敗した場合、Axios はエラーメッセージを含む約束。 .catch() を使用してエラーを処理できます:

<code class="javascript">client.get('/users').catch((error) => {
  // 错误信息存储在 error.response 中
  console.error(error.response);
});</code>

以上がvue フロントエンドはバックエンド インターフェイスをどのように呼び出しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。