【JavaScript】axiosでFormDataをPOST送信する方法

ちょっと混乱したので、備忘録としてまとめ。
タイトル通り、axios を使ってフォームから入力されたデータを POST 送信する方法についてです。

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

GitHub – axios/axios: Promise based HTTP client for the browser and node.js
https://github.com/axios/axios

サンプル API を作成し、Cordova アプリに組み込む作業を行っているのですが、URL も送信データも間違っていないようなのにエラーが返ってきてしまっていました。

が、よくよく見たら、送信データが payload となっており…こちらが原因でした。
なので、こちらを正しく FormData として送信するように修正します。

サンプルコードがこちら。

import axios from 'axios';

const data = new FormData();
data.append("mail", "murakami@example.com");
data.append("password", "passpass");

axios.post('[POST先のURL]', data)
  .then(function (response) {
    // 送信成功時の処理
    console.log(response);
  })
  .catch(function (error) {
    // 送信失敗時の処理
    console.log(error);
  });

上記はログインフォームで使うことを想定しています。

3～5行目で送信したいデータを FormData 形式で定義し、こちらを 7行目の axios.post() の第二引数に指定しています。
作業としてはこれだけ！
実際に API を実行してみたところ、きちんとサンプルデータが取得できました！

送信するデータの形式が違っているのはなかなか気付けず若干ハマりかけていましたが、無事に解決できてよかったです。

以上、JavaScript の axios で フォームに入力されたデータを POST 送信する方法でした。
ご参考になれば幸いです。