【React】「Fetch API」を使ってデータのPOST送信を行う方法

React を使った Cordova アプリでサーバーにデータを POST 送信をする方法です。
以前は Ajax を使っていたのですが、他の書き方も知りたいと思い、今回は「Fetch API」を使ってみることにしました。
使用方法の例も見て、使いやすそうだったのでチョイスしました。

GitHub のページはこちらから。

GitHub – github/fetch: A window.fetch JavaScript polyfill.
https://github.com/github/fetch

まず npm で Fetch API をインストールします。

npm install whatwg-fetch --save

上記コマンドの実行が完了したら、下記をプログラムに追加して、インポートします。

import 'whatwg-fetch';

あとは、GitHub のページを参考にして、HTML の取得や、POST 送信を行うだけです！
私は POST 送信を行いたかったので、下記のようにコードを記述しました。

// POST送信
fetch('[送信先のURL]', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Hubot',
    login: 'hubot',
  })
}).then(function(response) {
  // レスポンス結果
}, function(error) {
  // エラー内容
});

上記コードでは、2行目で送信先の URL を指定し、8～9 行目で送信するデータを指定しています。
なお、データは JSON 形式で送信するので、JSON.stringify() を使って JSON 形式に変換しています。
レスポンス結果やエラー内容は、それぞれ 11行目と 13行目で取得できます。
仕様に応じてエラーメッセージを表示したり、「送信完了しました」メッセージを表示したりしてください。

以上、「Fetch API」を使って、サーバーにPOST送信を行う方法でした。
実はエラーが発生してしまっているので、まだ実際には動かせてはいないのですが、コードはシンプルで分かりやすそうです。
また有益そうな情報が得られたらご紹介したいと思います。