Vue3+TS+Vite 開発スキル: バックエンド API と対話する方法

Vue3 TS Vite 開発のヒント: バックエンド API と対話する方法

はじめに:
Web アプリケーション開発では、フロントエンドと間のデータバックエンドのインタラクションは非常に重要なリンクです。人気のあるフロントエンド フレームワークとして、Vue3 にはバックエンド API と対話するためのさまざまな方法があります。この記事では、Vue3 TypeScript Vite 開発環境を使用してバックエンド API を操作する方法を紹介し、コード例を通じて理解を深めます。

1. Axios を使用してリクエストを送信する
Axios は、ブラウザーと Node.js 環境での使用をサポートする一般的な HTTP リクエスト ライブラリです。まずプロジェクトに Axios をインストールし、必要な場所に導入する必要があります。

サンプル コード:

import axios from 'axios';

export function fetchUserData(userId: number) {
  return axios.get(`/api/user/${userId}`);
}

この例では、userId パラメーターを受け取り、Axios を使用して GET リクエストをバックエンド API の /api/user/ に送信する関数 fetchUserData を定義します。 {userId}パス。 Axios は Promise を返すので、 then メソッドを使用して返されたデータを処理できます。

2. Fetch API を使用してリクエストを送信する
Axios に加えて、JavaScript のネイティブ Fetch API を使用してリクエストを送信することもできます。 Fetch API は、XMLHttpRequest HTTP リクエスト ライブラリに代わる最新の機能であり、ブラウザでの使用をサポートしています。

サンプル コード:

export function fetchUserData(userId: number) {
  return fetch(`/api/user/${userId}`).then(res => res.json());
}

この例では、Fetch API を使用して GET リクエストを送信し、then メソッドを通じて返されたデータを処理します。 Fetch API は Promise を返すため、返されたデータを解析するには json メソッドを使用する必要があることに注意してください。

3. リクエストの処理結果
一般に、バックエンド API によって返されるデータには、成功と失敗の 2 つの状況が考えられます。返されたステータス コードに基づいてリクエストが成功したかどうかを判断し、さまざまな結果を処理する必要があります。

サンプルコード:

export function fetchUserData(userId: number) {
  return axios.get(`/api/user/${userId}`).then(res => {
    if (res.status === 200) {
      // 请求成功
      return res.data;
    } else {
      // 请求失败
      throw new Error(res.statusText);
    }
  });
}

この例では、Axios を使用して GET リクエストを送信し、返されたステータス コードを判定します。ステータス コードが 200 の場合、リクエストが成功したことを意味し、res.data を通じて返されたデータを取得できます。ステータス コードが 200 でない場合は、リクエストが失敗したことを意味し、throw ステートメントを通じてエラーをスローできます。

4. 非同期/await を使用してリクエストを処理する
then メソッドを使用して Promise を処理することに加えて、ES2017 で導入された非同期/await 構文を使用してリクエストを処理することもできます。

サンプル コード:

export async function fetchUserData(userId: number) {
  try {
    const res = await axios.get(`/api/user/${userId}`);
    if (res.status === 200) {
      return res.data;
    } else {
      throw new Error(res.statusText);
    }
  } catch (error) {
    console.error(error);
  }
}

この例では、async/await 構文を使用して非同期リクエストを処理します。関数の前に async キーワードを追加すると、関数内で await を使用して Promise の結果を待つことができます。 try-catch ステートメントでは、await を使用して Axios の GET リクエストを待ち、返された結果を同じ方法で処理できます。

結論:
この記事では、Vue3 TypeScript Vite 開発環境を使用してバックエンド API と対話する方法を紹介し、コード例を通じて理解を深めます。 Axios または Fetch API を使用してリクエストを送信し、返されたステータス コードに基づいてリクエストの結果を処理できます。この記事が、Vue3 開発でバックエンド API を操作するすべての人に役立つことを願っています。

以上がVue3+TS+Vite 開発スキル: バックエンド API と対話する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。