【axios】HTTPリクエストメソッド別の引数一覧表（エイリアスを使用した場合）

はじめに

PromiseベースのHTTPクライアントであるaxiosのHTTPリクエストメソッド別の引数一覧表を作成しました。（エイリアスを使用した場合）

環境

OS: macOS Catalina 10.15.1
Vue: 2.6.10
vuex: 3.1.2
axios: 0.19.0

結論：まとめ

公式ドキュメント

For convenience aliases have been provided for all supported request methods.

axiosにはHTTPリクエストを簡単に投げられるように以下のようなエイリアスが用意されています。

sample.js

axios.エイリアス(第1引数, 第2引数, 第3引数)

|エイリアス|第1引数|第2引数|第3引数|
|:-:|:-:|:-:|:-:|:-:|
|request(省略可)|config|-|-|
|get|url|(config)|-|
|delete|url|(config)|-|
|post|url|data|(config)|
|put|url|data|(config)|
|patch|url|data|(config)|

※1 configには、オブジェクトで任意のHTTPリクエストに必要な情報を渡すことが出来ます。
※2 (config)は必須ではありません。

使用例

axios.request({ //axios({ のように.request省略可
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios.get('anyUrl')

axios.post('anyUrl', anyParams)

余談：なぜ書こうと思ったか

DELETEリクエストにparamsを渡したい状況になり、以下コードを書きました。

sample.js

axios.delete('/api/v1/any', anyParams)

その前にaxiosを使って以下POSTリクエストを投げるコードが動いており、そのまま流用すればうまくいくと思っていたものの、DELETEリクエストのBodyにparamsが入ってくれませんでした。

sample.js

axios.post('/api/v1/any/create', anyParams)

【解決】

以下のように修正して解決しました。

sample.js

//これではanyParamsが、paramsとして認識されない
axios.delete('/api/v1/any', anyParams)

↓

sample.js

//これでconfig扱いとなり、anyParamsをparamsとしてDELETEリクエストに含めて渡すことが出来るようになる
axios.delete('/api/v1/any', {params: anyParams })

postとdelete、同じ書き方で大丈夫と考えていたので問題の対象と捉えておらず、ハマってしまい反省です

おわりに

最後まで読んで頂きありがとうございました

どなたかの参考になれば幸いです

参考にさせて頂いたサイト（いつもありがとうございます）

• GitHub - axios/axios: Promise based HTTP client for the browser and node.js