【axios】POSTで通信する時にBodyにパラメタをセットする方法

些細なつまづきでしたが自戒の念を込めてQiitaに残します。間違っているところやもっとこうしたほうがいいよなどありましたらコメントによろしくお願いします。

前提

POSTで通信する時にBodyにセットしたいパラメタを次のようにします。オブジェクトじゃなくても問題ないです。

const param = { id: 1, title: "BLEACH", price: 440 };

バックエンドはBodyの値を取得したときparamsを”直接”取得したいとのことでした。（”直接”の意味は後ほど）

結論

axiosにオブジェクトの引数を入れるだけでした(泣)。keyがdataのところにBodyにセットしたい値（ここではparam）を書いてください。

const options = {
  method: "POST",
  url: URI,
  headers: { "Content-Type": "application/json" },
  data: param,
};
const res = axios(options); // 適宜awaitなどを付けてください

なぜ困ったか

私にとってむしろここが本題かも。axios使うときは必ずaxios.getやaxios.postで実装してました。中途半端にドキュメントを読んだせいで

axios.post(URI, { data: param });

と書けばBodyに値がセットできると思ってました。ですがバックエンドから「keyにdataを指定しないとBodyの値が取れないよ！」と言われた（これが上で出てきた”直接”の意味です。）のでおかしいなーと思いつつ

axios.post(URI, param);

これでその場は解決しました。後日バックエンドから「timeoutも設定してくれ！」と頼まれました。この時に困りました。

axios.post(URI, { data: param, timeout: 1000 });

これだと、いやいやこれだとまたkeyのdataを介してじゃないと取れへんやん、となりドキュメントをちゃんと読み今回の結論に至りました。

最後に

これからはaxios.getやaxios.postを使わずにaxios(options)実装しようと思いました。結局ドキュメントちゃんと読めって話ですね。

参考