スキップしてメイン コンテンツに移動

axiosの使い方まとめ (GET/POST/例外処理)

最近何かとよく使うJavaScriptでAJAX通信を行うaxiosについて、簡単に使い方をまとめました。

JavaScriptコードのイメージ

GETリクエストをaxiosで送る

まずはGETリクエストをaxiosで送る方法です。

const res = await axios.get('/users')
console.log(res.data)

分割代入の記法を使うと、以下のようにも書けます

const {data} = await axios.get('/users')
console.log(data)

クエリパラメータ (URLパラメータ)を指定

クエリパラメータを指定する方法は2つあります。

1つ目は、axios.getに指定するURLに直接記述する方法です。

axios.get('/user?id=123')

2つめは、axios.getの第2引数に、オプション指定する方法です。

axios.get('/user', {
  params: {
    id: 123
  }
})

POSTリクエストをaxiosで送る

次はPOSTリクエストをaxiosで送る方法です。

JSON形式でPOSTする

JSON形式でPOSTする場合は、axios.postの第2引数に、送信するデータをJavaScriptオブジェクトで指定します。

const res = await axios.post('/user', {
  id: 123,
  name: 'Yamada Tarou'
})

application/x-www-form-urlencoded形式でPOSTする

application/x-www-form-urlencoded形式でPOSTする場合は、URLSearchParamsを使います。

var params = new URLSearchParams()
params.append('id', 123)
params.append('name', 'Yamada Tarou')
const res = await axios.post('/user', params)

axios でファイルをアップロードする

画像などのファイルを、axiosでアップロードする場合は、以下のように書きます。

[Javascript]

var params = new FormData()
var file = document.getElementById("file-input")

params.append('file', file.files[0])
const res = await axios.post(url, params, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

[HTML]

<input id="file-input" type="file" />

アップロードするファイルをFormDataクラスに追加して、ヘッダーのContent-Typemultipart/form-dataを設定することがポイントです。

axiosの例外処理

レスポンスエラー時の、axiosにおける例外処理について紹介します。例外処理の実装パターンには大きく2つのやり方があります。

try-catchパターン

axiosの通信処理を、try-catchで囲む実装パターンです。

let res
try {
  res = await axios.get("/user?id=123");
} catch (err) {
  res = err.response
}

if (res.status != 200) {
   console.log("例外発生時の処理")
}

await-catchパターン

axiosのgetおよびpostはasync関数のため、戻り値がPromissとなる。そのためPromissのawait/catchパターンで例外処理が行えます。

const res = await axios.get("/user?id=123")
 .catch(err => {
   return err.response
 });

if (res.status != 200) {
   console.log("例外発生時の処理")
}

どっちのパターンを使えばいい

try-catch、await-catchパターンの2の例外実装について紹介しました。ではどちらを使ったほうが良いのでしょうか?

好みの問題もあるかもしれませんが、基本的には以下の2つのメリットから、await-catchパターンで例外処理をするのが良いと言われています。

  • try-catchのような冗長さがなくなる
  • レスポンスをletを使わずconstで宣言できる

レスポンスデータの受け取り方

axiosのgetpost関数の戻りは、promissで返ってくるため、awaitパターンや、thenパターンなどでレスポンスが受け取れます。

awaitパターン

なんと言っても、awaitパターンで書くのが一番スマートにかけます。

const res = await axios.get('/users')
console.log(res.data)

awaitはEMCA2017で正式に追加された仕様のため、一部のブラウザでは使用できない可能性があります。実際はES5にトランスパイルしてから、使うことになると思います。
(2020年3月現在のブラウザ対応状況は、以下の通りです)

awaitのブラウザ別対応状況

IE以外の主要なブラウザでは awaitをサポートしています

thenパターン

axios.get('/users').then(res => {
  console.log(res.data)
})

IE11の場合、Promissをサポートしていません。polyfillライブラリを入れると使えます。

<!--[if IE]>
<script src="https://www.promisejs.org/polyfills/promise-done-7.0.4.min.js"></script>
<![endif]-->

さいごに

今回は、axiosの使い方について紹介しました。jQueryでも同じように書けますが、最近はあえてjQueryを使わず、素のJavaScriptで組んで、AJAXの部分だけをaxiosを使ったりする事が多くなりました。

Angular, Next.js. vue.jsなどのフレームワークと組み合わせてaxiosを使うことも多いため、axios使い方は覚えておいて損はないと思います。

<広告>
私自身使ってみて、最安290円なのにメチャ早かったので紹介させてください (__)

スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント

このブログの人気の投稿

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決する

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決するタイトルの通りですが、Windows 8 以降では Windows Form アプリケーションで、コントロールの ImeMode に Katakana や KatakanaHalf を設定しても、カタカナになってくれません。なぜ ImeMode が効かないのか?Windows 8 以降、IME Mode の切り替えは、ユーザー単位で切り替わるようになった為、アプリから IME Mode 制御が出来ないようになりました。
(IME をON にした場合、常に ひらがな モードになます)※ Windows 7までは、IME Modeの切り替えはアプリ単位で行われていた為、問題なくアプリから IME制御が行えました。対処方法Windows 8 以降、IMEの制御は、InputScope クラスの利用が推奨されています。
しかし、InputScope クラスは、WPF、Windows ストアアプリでしか使えない為、Windows Formアプリでは使用できません。
(Windows Form はもう使うな!という事でしょうか (涙) )結論としては、コントールパネルの設定で、IMEの制御をユーザ単位から アプリ単位に変更する事ができます。
これで、Windows Formアプリでも 従来通りIMEの制御を行う事が出来ます。おわりにこの方法だと、アプリをインストールする端末すべてに設定が必要となり、とっても面倒です。。。
しかし、今の所これしか方法がない状態です。
これからは Windows Formではなく、WPFや Windows ストアアプリで作れという事ですかね (^^;)

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]MailKitを使ってメールを送るサンプルコードです。(C#)UTF8/iso-2022-jpのエンコーディング指定、GMail/YahooのSMTPサーバで送るなど、4つのサンプルコードでMailKitの使い方を紹介します。MailKitって何?2017年に.NET標準のSystem.Net.Mail.SmtpClientが廃止予定となり、Microsoftより今後はオープンソースライブラリである、MailKitに置き換えるとアナウンスがありました。既にSmtpClientは非推奨になっており、今後は廃止されていきます。現在、SmtpClientを使用したソースコードには、Visual StudioからMailKitを使うよう警告が出るようになっています。さっそく、MailKitを使ってメールを送信するサンプルコードを作っていきます。UTF8でメールを送信文字エンコーディングを、UTF8でメールを送信するサンプルコードです。
MailKitは、デフォルトの文字エンコーディングがUTF8なっている為、シンプルなコードでメールを送信する事ができます。var host ="<smtp server name>"; var port =25;// or 587using(var smtp =new MailKit.Net.Smtp.SmtpClient()){//SMTPサーバに接続する smtp.Connect(host, port, MailKit.Security.SecureSocketOptions.Auto);//認証が必要な場合は、以下のコメントを解除//smtp.Authenticate("<id>", "<password>");//送信するメールを作成する var mail =new MimeKit.MimeMessage(); var builder =new MimeKit.BodyBuilder(); mail.From.Add(new MimeKit.MailboxAddress("",&quo…