React で Fetch API を使用して POST リクエストを作成する

1. React で Fetch API を使用して POST リクエストを作成する
2. HTTP ヘッダーが設定されたFetchを使用したPOSTリクエスト
3. React でasync/awaitを指定してFetchを使用したPOSTリクエスト
4. エラー処理付きのFetchを使用したPOSTリクエスト

API を介したデータの送受信は、複雑な Web アプリケーションにとって不可欠な機能です。

React は、Web アプリを構築するための非常に人気のあるフレームワークです。 他の JavaScript ベースのフレームワークと同様に、開発者は Fetch API を使用してサーバーと通信できます。

このガイドでは、React で POST リクエストを作成する方法を示します。

React で Fetch API を使用して POST リクエストを作成する

React クラス コンポーネントを構築するときは、ライフサイクル メソッドで HTTP リクエストを作成する必要があります。 通常、componentDidMount() メソッドで。

ライフサイクル メソッドを置き換える機能クラス コンポーネント用の useEffect() フックがあります。

Fetch リクエストの構造は fetch(endpointURL, requestOptions) のようになります。

理解を深めるために、React の実際の機能コンポーネントを見てみましょう。

export default function App() {
  const url = "www.somewebsite.com";
  const options = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Irakli Tchigladze" })
  };
  useEffect(() => {
    fetch(url, options);
  }, []);
  return <div className="App"></div>;
}

CodeSandbox でのライブ デモ。

この例では、useEffect() フックを使用してリクエストを行います。 フックの最初の引数はコールバック関数で、fetch メソッドを使用してリクエストを行います。

url 変数には、データを POST する API エンドポイントの URL が含まれています。

options 変数には、options オブジェクトが含まれています。これは、POST リクエストを作成するための必須コンポーネントです。 method、headers、body の 3つのプロパティがあります。

method プロパティの値は、実行する必要があるアクションのタイプを指定します。 この場合、それはサーバーに新しいレコードを作成するように指示する 'POST' です。

'GET'、'PUT'、'PATCH'、'DELETE' の値を持つこともできます。

headers プロパティは、データの処理方法を指定するために使用されます。

最後に、body プロパティには、API エンドポイントの反対側にあるサーバーに転送する必要があるデータが含まれています。

HTTP ヘッダーが設定されたFetchを使用したPOSTリクエスト

すでに述べたように、headers プロパティは、データの目的と、受信アプリケーションがデータを処理する方法を参照します。

この例では、データを JSON として解析する必要があることを指定する 'application-json' の値を設定します。

React でasync/awaitを指定してFetchを使用したPOSTリクエスト

プロミスをチェーンするために then() メソッドを使用する代わりに、多くの開発者はよりクリーンな async/await 構文を使用します。 例を見てみましょう。

export default function App() {
  const url = "www.somewebsite.com";
  const options = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Irakli Tchigladze" })
  };
  useEffect(() => {
    const getData = async () => {
       try {
        const response = await fetch(url, options);
        const data = await response.json();
        return data;
    } catch (e) {
        return e;
    }
    }
    getData()
  }, []);
  return <div className="App"></div>;
}

この例では、同じ url と options がありますが、then() とチェーンされた promise を async と await キーワードに置き換えます。

promise チェーンを await キーワードに置き換えるには、関数定義でキーワード async を使用する必要があります。

useEffect() フックの最初の引数であるコールバック関数で async キーワードを直接使用できないことに注意してください。 代わりに、コールバック内で新しい関数 getData を定義し、関数の最後で呼び出します。

エラー処理付きのFetchを使用したPOSTリクエスト

多くの開発者は、POST リクエストを行う際によくある間違いを犯します。 間違いは、options オブジェクトの body パラメータに間違った値を指定することです。

body パラメーターは、独自のキーと値のペアを持つ JavaScript オブジェクトを受け取ります。 多くの場合、開発者は未加工の JavaScript オブジェクトを渡すため、エラーを受け取ります。

同様の状況でエラーが発生し続ける場合は、生データを引数として JSON.stringify() メソッドに渡してみてください。

POST リクエストを行うときにエラー処理を実装する最も簡単な方法は、try...catch ステートメントを使用することです。 上記の例の getData 関数を見てみましょう。

const getData = async () => {
       try {
        const response = await fetch(url, options);
        const data = await response.json();
        return data;
    } catch (error) {
        return error;
    }

関数本体には 2つのコード ブロックが含まれています。1つは try ステートメントの下にあり、もう 1つは catch の下にあります。

まず、リクエストを作成してデータを返します。 何らかの理由でエラーが発生し、リクエストが失敗した場合、JavaScript は catch ブロック内のコードを実行します。

catch ステートメントは引数を 1つ取ります。これは、リクエストが失敗した原因を表す変数名です。 この値を返して、何が問題だったかを調べることができます。

多くの開発者は、この変数をコンソールに記録します。