https://elsammit-beginnerblg.hatenablog.com/entry/2021/02/11/221720

react nesでchatbotを作成してみました。
elsammit-beginnerblg.hatenablog.com

今回はこちらのchatbotを用いて会社名を聞くと会社名に対する利益や住所の情報が返ってくるアプリを作ってみました。
その際に、会社情報を収集するためのサーバを構築の上、post requestにより会社名から会社情報を収集いたしました。

reactからpost requestを行うことは今度もあるので、まとめておこうと思います！！
f:id:Elsammit:20210206185459p:plain

■reactでpost request方法

reactでpost requestを行う場合、fetchを行うことで簡単にpost requestを行うことが可能です。
コードはこんな感じになります。

const requestOptions ={
   method: 'POST',
   headers:{'Content-Type': 'application/json'},
   body: JSON.stringify({Name: "hogehoge"})
 };
 fetch(url,requestOptions)

まず、

const requestOptions ={
   method: 'POST',
   headers:{'Content-Type': 'application/json'},
   body: JSON.stringify({Name: "hogehoge"})
 };

にてpost send選択やpost requestを行うbodyやheaderを指定します。
今回のコードはbodyにjson形式のデータを指定しています。
stringify()関数ですが、引数に与えた文字列をjson文字列に変換させることが可能です。
詳細はこちらのサイトをご参照ください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

そして、

 fetch(url,requestOptions)

にて先ほど指定したパラメータとrequest先のurlを引数にfetchを実行しています。
これでreactでpost requestが可能になります。

■post request後のresponseデータ取得

次にpost request後にresponseされたデータを取得する方法です。
コードはjsonデータを受信した場合を記載いたします。
コードはこちら。

const requestOptions ={
   method: 'POST',
   headers:{'Content-Type': 'application/json'},
   body: JSON.stringify({Name: "hogehoge"})
 };
 fetch(url,requestOptions
 ).then((response)=> response.json()
 ).then((responseJson) =>{
   console.log(responseJson)
 })

先ほどのpost requestのみのコードと異なる点はこちら。

 fetch(url,requestOptions
 ).then((response)=> response.json()
 ).then((responseJson) =>{
   console.log(responseJson)
 }).catch(()=>{
     console.log("error");
  })

responseされたデータをjsonデータのみに分離し、
そのjsonデータをconsole.logでログ出力しています。
例えば、

{
   "messageA":"hogehoge",
   "messageB";"fugafuga"
}

といったデータをresponseした場合、
responseJsonは、

{
   "messageA":"hogehoge",
   "messageB";"fugafuga"
}

が取得できます。
各要素を取得する場合には、

console.log(responseJson.messageA)

や

console.log(responseJson.messageB)

といった指定方法を行えばOKです。
それぞれこんな感じで結果が得られます。

hogehoge

fugafuga

■fetchでの非同期処理

次に非同期処理でpost responseを受け取ってみます。
コードはこんな感じです。

async componentDidMount() {
   const requestOptions ={
      method: 'POST',
      headers:{'Content-Type': 'application/json'},
      body: JSON.stringify({Name: "hogehoge"})
    };
    await fetch(url,requestOptions)
    const data = await response.json();
}

async awaitを用いて、非同期処理を実施しています。

こんな感じで非同期処理を作成することも可能です。

const requestOptions ={
   method: 'POST',
   headers:{'Content-Type': 'application/json'},
   body: JSON.stringify({Name: "hogehoge"})
 };
 fetch('url',requestOptions
 .then(async response => {
     const responseJson = await response.json();

     if (!response.ok) {
         const error = (responseJson && responseJson.message) || response.status;
         return Promise.reject(error);
     }
     console.log(responseJson)

 })
 .catch(error => {
     console.error('There was an error!', error);
 });