【axios】 axios処理のgetにおけるパラメータの渡し方

こんにちは、shinoです。毎日ボチボチプログラミングをしながら生活しています。その中での技術・エラーなどの紹介をしています。

今回は、axiosを利用していて問題が出ていたので紹介していきます。axiosを初めて使う方向けに書いてみます。私も最近少し使っただけなので調べながらやっている状態です。解決すると本当にしょうもないミスでした。

今回の事象

axiosのget処理にて、パラメータの渡し方にて少しハマったのでここに書き残しておきます。できるだけわかりやすく載せてみますので、参考にしてみて下さい。

結論

早速、結論から書いて行こうかと思います。urlは「/test」にリクエストを送ることを想定しておきます。idを指定していく方法を書いていきます。

paramsというoptionをつけることでパラメータをつけます。送られるものとしては、「/test?id=1」となります。queryにidが1という情報がつきます。

ハマった理由

結論としては、optionをつけるものと簡単なものです。ハマった理由は、最初にpost処理を書いていたからです。

get処理を使う前にpost処理を使っていました。post処理では、json形式で送れていたので混乱しました。

具体的には、以下のように遅れます。

post処理の場合は、このように書くことができます。get処理のようにparamsなどの記載がなく更新させることができます。

受け取り方

axiosの受信先での受け取り方も残しておきます。
getの場合は、「req.query.id」になります。

post処理の場合は、「req.body.id, req.body.name」で受け取ることができます。処理が直接見れるわけではないのでちゃんとした認識が必要です。実際に自分で確認してみて下さい。

最後に

お疲れ様です。axiosの処理は解決できたでしょうか？
他にもエラー情報等も掲載してあるので読んでみて下さい。

解決できなければ、NuxtJS公式を確認してみるのもいいと思います。

ひと休憩の際におすすめ記事は「【Nuxt.js】ローカル環境にてcorsの設定方法」です。時間があれば読んでみて下さい。