React での POST HTTP リクエスト

プラトン再発行

フォロワー： 0

概要

APIを使用する場合、処理のためにサーバーにデータを送信したいことがよくあります。たとえば、やることのリストがあり、それに追加したい場合、おそらくフォームの送信を通じて、POST HTTPリクエストを使用して、処理と潜在的な永続性のためのペイロードを含むリクエストを送信します。

この記事では、FetchAPIとAxiosというXNUMXつの一般的なアプローチを使用してReactでPOSTHTTPリクエストを実行する方法を学習します。また、機能コンポーネントとクラスベースのコンポーネントでこれを行う方法についても学びます。

Fetch APIを使用すると、ReactでPOSTHTTPリクエストを送信するのは次のように簡単です。


fetch('/myserver.endpoint', {
  method: 'POST',
  body: JSON.stringify({
    
  })
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
   .then((response) => response.json())
   .then((data) => {
      console.log(data);
      
   })
   .catch((err) => {
      console.log(err.message);
   });

Axiosは、HTTPPOSTリクエストを送信するためのエレガントな代替手段を提供します。


axios.post('/myserver.endpoint', {
    
  })
  .then((response) => {
    console.log(response.data);
      
  })
  .catch((error) => {
    console.log(error);
  })

これらのアプローチとその仕組みについて詳しく知りたい場合は、ガイドの残りの部分をお読みください。

POST HTTPリクエストとは何ですか？

名前が示すように、POSTリクエストはデータをエンドポイントに投稿するために使用されます。エンドポイントは通常、データを処理してデータベースに保存します。このデータは、フォームから取得したり、オブジェクトに保存したり、別の方法で取得したりできますが、通常、RESTAPIが使用できるようにJSON表現に変換されます。

動詞を使用したHTTPリクエストの送信は、 APIをフェッチ （組み込み）およびライブラリなど Axios。 Fetch APIは、HTTPリクエストを実行するための組み込みのブラウザメソッドですが、Axiosは、使用する前にプロジェクトにインストールする必要がある外部パッケージです。

これらのどちらを選択するかはあなた次第です。 Fetch APIはより冗長で、非同期リクエストでは機能しませんが、Axiosは外部依存関係です。それでも、多くの人はFetchAPIよりもAxiosを使用することを好みます。両方をカバーします。

どちらの方法にも長所と短所がありますが、標準のHTTP動詞を処理できることに注意することが重要です– POST, GET, PUT, PATCH, DELETE.

注：前に述べたように、私たちは実行する方法を学びます POST Fetch APIおよびAxiosメソッドを使用する機能コンポーネントを使用したリクエスト、およびクラスベースのコンポーネントを使用したリクエスト JSONプレースホルダー無料の偽の投稿RESTAPI.

この例では、モックAPIから既にフェッチした投稿のリストを作成します。新しい投稿のタイトルと本文を受け取るフォームを作成し、送信されると、POSTリクエストをモックサーバーに送信して処理します。

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
         .then((res) => res.json())
         .then((data) => {
            console.log(data);
            setPosts(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, []);

   return (
      <>
         <div className="add-post-container">
            <form>
               <input type="text" className="form-control" />
               <textarea className="form-control" cols="10" rows="8"></textarea>
               <button type="submit">Add Post</button>
            </form>
         </div>
         <div className="posts-container">
            {posts.map((post) => {
               return (
                  <div className="post-card" key={post.id}>
                     <h2 className="post-title">{post.title}</h2>
                     <p className="post-body">{post.body}</p>
                     <div className="button">
                        <div className="delete-btn">Delete</div>
                     </div>
                  </div>
               );
            })}
         </div>
      </>
   );
};

export default App;

フォームを機能させて、フォームが送信されたらWebサイトの投稿リストにデータを追加できるようにします。

Reactの機能コンポーネントでPOSTHTTPリクエストを実行する方法

Reactにフックが導入されたおかげで、機能コンポーネントでHTTPリクエストを実行できるようになりました。以前は、機能コンポーネントはUIのレンダリングにのみ使用されていました。

JavaScript関数（標準またはES6）がReact要素（JSX）を返すと、機能コンポーネントが作成されます。

クラスベースのコンポーネントのようにコンストラクターメソッドで状態オブジェクトを使用するのではなく、次のようなReactフックを使用するようになりました。 useState() 元のデータに渡す前にデータを保存します。

FetchAPIを使用してReactの機能コンポーネントでPOSTHTTPリクエストを実行する方法

Fetch APIは、を返す組み込みのブラウザメソッドであるため Promise、私たちは .then() および .catch() 成功と失敗を処理する方法。また、データをPOSTするリソース/ APIのURLである必須の引数と、HTTPリクエストを示す引数（この場合は POST:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   
   
   
   
   const handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: title,
            body: body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((res) => res.json())
         .then((post) => {
            setPosts((posts) => [post, ...posts]);
            setTitle('');
            setBody('');
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   return (
      
   );
};

export default App;

上記のコードでは、フォームの送信ボタンがクリックされたときにトリガーされるように、フォームにリンクするメソッドを作成しました。私たちは使用することから始めました e.preventDefault() フォームを送信するときにページが再読み込みされないようにするため。通常あなたが何をしたいのか、しかし私たちのデモではうまくいきません：

const handleSubmit = (e) => {
   e.preventDefault();
};

こちらを見てみましょう fetch() 呼び出し、最初の必須パラメーターとしてURLを追加し、XNUMX番目のパラメーターはリクエストメソッド（POST）、 body、そしてその header:

body –APIエンドポイントに送信するデータが含まれています。 ストリング化する、それをテキストベースのJSON表現に変換します。
header –コンテンツタイプを指定します。この場合は application/json、ペイロードはJSON文字列として表されるため：

const handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: title,
         body: body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

最後に、このメソッドは Promise、JSONコンテンツを抽出し（サーバーの応答）、更新しました posts 新しいデータを含める状態。

エラーを処理するために、 .catch() 方法：

ベストプラクティス、業界で認められた標準、および含まれているチートシートを含む、Gitを学習するための実践的で実用的なガイドを確認してください。グーグルGitコマンドを停止し、実際に学ぶそれ！

const handleSubmit = (e) => {
   e.preventDefault();
   fetch({...})
      .then((res) => res.json())
      .then((post) => {
         setPosts((posts) => [post, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

警告： 通常、あなたは フロントエンドでデータを保存および処理しません 私たちと同じですが、使用しているモックAPIは実際には新しい投稿を保存して返すことはないため、最初のGETリクエストから返されるリストに人為的に追加しています。投稿がデータベースに保存されたら、バックエンドに別のリクエストを送信して、ユーザーに表示する応答を提供できます。これが、フォーム送信のデフォルトの動作がページをリロードすることである理由でもあります。これにより、最初のページがトリガーされます。 fetch() GETリクエストを送信し、古い投稿と一緒に新しい投稿を自動的に表示します。

Axiosを使用してReactの機能コンポーネントでPOSTHTTPリクエストを実行する方法

前のセクションで、FetchAPIを使用してPOSTリクエストを実行する方法について説明しました。それでは、を変更してみましょう handleSubmit() メソッドを実行し、代わりにAxiosを使用してPOSTリクエストを実行します。

Axiosは、promiseを使用して送信を簡単にするHTTPクライアントライブラリです。 非同期HTTPリクエスト RESTエンドポイントへ。これは外部ライブラリであるため、プロジェクトのディレクトリで次のコマンドを実行して、最初にプロジェクトにインストールする必要があります。

$ npm install axios

Axiosを正常にインストールしたら、POSTリクエストの実行に進むことができます。

const handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: title,
         body: body,
      })
      .then((res) => {
         setPosts((posts) => [res.data, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

上記のコードを見ると、Fetch APIよりもはるかに簡単で、必要な構文も少なくて済みます。JSONに変換したり、ヘッダーを操作したり、データを文字列化したりする必要がなくなったためです。この定型文は、Axiosによって抽象化されています。

ReactのクラスコンポーネントでPOSTHTTPリクエストを実行する方法

クラスコンポーネントのPOSTリクエストは、Reactフックを使用せず、代わりに機能コンポーネントを使用するため、機能コンポーネントとは異なる方法で処理されます。 state オブジェクト。

クラスコンポーネントは、JSXを返し、React拡張機能を必要とするES6クラスです。

FetchAPIを使用してReactのクラスコンポーネントでPOSTHTTPリクエストを実行する方法

リクエストは機能コンポーネントのリクエストと非常によく似ています。いくつかの違いが見つかるのは、データを保存するときだけです。 state 使用する場合 state を使用しなくなったため、値 useState() 針：

import React, { Component } from 'react';

class App extends Component {

   constructor(props) {
      super(props);
      this.state = {
         posts: [],
      };
   }
   
   

   handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: this.state.title,
            body: this.state.body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((response) => response.json())
         .then((data) => {
            this.setState({ posts: [data, ...this.state.posts] });
            this.setState({ title: '' });
            this.setState({ body: '' });
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   render() {
      const { posts, title, body } = this.state;
      return (
         
      );
   }
}

export default App;

今回は、メソッドを宣言しなくなりました const キーワード。代わりに、接頭辞を付けてください this。このメソッドは、フォームの送信ボタンがクリックされたときにトリガーされます。フォームなので、まずは e.preventDefault() フォームの送信時にページが再読み込みされないようにするには：

handleSubmit = (e) => {
   e.preventDefault();
};

前に学習したように、FetchAPIはXNUMXつのパラメーターを取ります。 XNUMXつはURLで、もうXNUMXつはリクエストメソッド（POST), body、これは私たちが投稿している情報です（文字列化する必要があります）、そして headers:

handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: this.state.title,
         body: this.state.body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

これが約束であることを知って、私たちは今、添付することができます .then() 成功を処理する方法と .catch() HTTPリクエストにエラーまたは失敗があった場合に状況を処理するメソッド。

Axiosを使用してReactのクラスコンポーネントでPOSTHTTPリクエストを実行する方法

実行する方法を見てきました POST クラスベースのコンポーネントでのHTTPリクエスト。これはAxiosと非常によく似ています。これは、Axiosをインストールしてから、 handleSubmit() メソッドなので、FetchAPIではなくAxiosを使用するようになりました。

handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: this.state.title,
         body: this.state.body,
         userId: 1,
      })
      .then((response) => {
         this.setState({ posts: [response.data, ...this.state.posts] });
         this.setState({ title: '' });
         this.setState({ body: '' });
      })
      .catch((error) => console.log(error));
};