Axiosを使ってJavaScriptで簡単にHTTPリクエストを送信する方法

JavaScriptを学びたい方は、jshandbook.comの電子書籍もぜひご覧ください。

はじめに

Axiosは、HTTPリクエストを実行するために広く使われている人気のJavaScriptライブラリです。ブラウザとNode.jsの両方の環境で動作します。

IE8以降を含むすべてのモダンブラウザをサポートしており、Promiseベースで設計されているため、async/await構文を使ってXHRリクエストを簡潔かつ読みやすく記述できます。

ネイティブのFetch APIではなくAxiosを使うメリットには、次のようなものがあります。

• 古いブラウザにも対応している(Fetchはポリフィルが必要)
• リクエストを中断(キャンセル)できる
• レスポンスのタイムアウトを設定できる
• CSRF保護が組み込まれている
• アップロードの進捗表示に対応している
• JSONデータを自動的に変換してくれる
• Node.jsでも動作する

インストール

Axiosはnpmでインストールできます。

npm install axios

yarnを使う場合は以下のとおりです。

yarn add axios

また、unpkg.com経由でページに直接読み込むことも可能です。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios APIの基本

HTTPリクエストは、axiosオブジェクトに対して直接実行できます。

axios({
  url: 'https://dog.ceo/api/breeds/list/all',
  method: 'get',
  data: {
    foo: 'bar'
  }
})

ただし、利便性の観点から、実際には以下のようなショートカットメソッドを使うのが一般的です。

• axios.get()
• axios.post()

jQueryで$.ajax()の代わりに$.get()や$.post()を使うのと同じイメージです。

さらにAxiosは、あまり頻繁には使われないものの実務で登場するHTTPメソッドにも対応しています。

• axios.delete()
• axios.put()
• axios.patch()
• axios.options()

このほか、レスポンスボディを破棄してHTTPヘッダだけを取得するaxios.head()も用意されています。

GETリクエスト

Axiosの便利な使い方として、モダンな(ES2017の)async/await構文との組み合わせが挙げられます。

次のNode.jsの例では、Dog APIにaxios.get()でアクセスして全犬種のリストを取得し、その数を数えています。

const axios = require('axios')

const getBreeds = async () => {
  try {
    return await axios.get('https://dog.ceo/api/breeds/list/all')
  } catch (error) {
    console.error(error)
  }
}

const countBreeds = async () => {
  const breeds = await getBreeds()

  if (breeds.data.message) {
    console.log(`Got ${Object.entries(breeds.data.message).length} breeds`)
  }
}

countBreeds()

async/awaitを使いたくない場合は、従来のPromise構文でも同じ処理を書けます。

const axios = require('axios')

const getBreeds = () => {
  try {
    return axios.get('https://dog.ceo/api/breeds/list/all')
  } catch (error) {
    console.error(error)
  }
}

const countBreeds = async () => {
  const breeds = getBreeds()
    .then(response => {
      if (response.data.message) {
        console.log(
          `Got ${Object.entries(response.data.message).length} breeds`
        )
      }
    })
    .catch(error => {
      console.log(error)
    })
}

countBreeds()

GETリクエストへのパラメータ追加

GETリクエストでは、https://site.com/?foo=barのようにURLにクエリパラメータを含めることができます。

Axiosでは、そのままURLを指定するだけで実現できます。

axios.get('https://site.com/?foo=bar')

あるいは、オプションのparamsプロパティを使う方法もあります。こちらの方がコードの可読性が高く、パラメータの管理もしやすいでしょう。

axios.get('https://site.com/', {
  params: {
    foo: 'bar'
  }
})

POSTリクエスト

POSTリクエストの送信もGETとほぼ同じ要領です。axios.getの代わりにaxios.postを使うだけです。

axios.post('https://site.com/')

POSTで送信するデータを含んだオブジェクトは、第2引数として渡します。

axios.post('https://site.com/', { foo: 'bar' })

JavaScriptを学びたい方は、jshandbook.comの電子書籍もぜひご覧ください。