Axiosを使用したHTTPリクエスト

Axiosは、HTTPリクエストの実行に使用できる非常に人気のあるJavaScriptライブラリであり、ブラウザとNode.jsプラットフォームの両方で機能します。

Axiosの紹介

Axiosは、HTTPリクエストの実行に使用できる非常に人気のあるJavaScriptライブラリであり、ブラウザとNode.jsプラットフォーム。

IE8以降のサポートを含むすべての最新ブラウザをサポートします。

これはpromiseベースであり、これにより、実行する非同期/待機コードを記述できます。XHR非常に簡単にリクエストできます。

Axiosを使用すると、ネイティブに比べてかなりの利点がありますフェッチAPI

  • 古いブラウザをサポートします(フェッチにはポリフィルが必要です)
  • リクエストを中止する方法があります
  • 応答タイムアウトを設定する方法があります
  • CSRF保護が組み込まれています
  • アップロードの進行状況をサポート
  • 自動実行JSONデータ変換
  • Node.jsで動作します

ビデオチュートリアル

POSTエンドポイントを提供するExpressサーバーを作成し、それにAxiosリクエストを送信して、データを投稿するこのビデオを確認してください。


インストール

Axiosは、Node.jsで使用するためにインストールできます。npm

npm install axios

ブラウザでは、unpkg.comを使用してページに含めることができます。

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

API呼び出しを有効にする必要があることを忘れないでくださいCORSブラウザ内でアクセスする必要があります。そうしないと、リクエストは失敗します。

Axios API

からHTTPリクエストを開始できますaxiosオブジェクト:

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

これは約束する。 async / awaitを使用して、応答オブジェクトに対するその約束を解決できます。

;(async () => {
  const response = await axios({
    url: 'https://dog.ceo/api/breeds/list/all',
    method: 'get'
  })

console.log(response) })()

便宜上、通常はメソッドを使用します

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

オールディーズの場合、jQueryのように、$.get()そして$.post()の代わりに$.ajax()

それらはより単純な構文を提供します。例えば:

;(async () => {
  const response = await axios.get('https://dog.ceo/api/breeds/list/all')
  console.log(response)
})()

Axiosは、あまり人気がないがまだ使用されているすべてのHTTP動詞のメソッドを提供します。

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

リクエストのHTTPヘッダーを取得し、本文を破棄するメソッド、axios.head()

GETリクエスト

このNode.jsの例は、DogAPIを使用して、すべての犬の品種のリストを取得するには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 </span><span style="color:#e6db74">${</span>Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">breeds</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>).<span style="color:#a6e22e">length</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> breeds) } }

countBreeds()

async / awaitを使用したくない場合は、約束構文:

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 </span><span style="color:#e6db74">${</span>Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">response</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>).<span style="color:#a6e22e">length</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> breeds ) } }) .catch(error => { console.log(error) }) }

countBreeds()

GETリクエストにパラメータを追加する

GET応答には、次のようにURLにパラメーターを含めることができます。https://site.com/?name=Flavio

Axiosでは、次のURLを使用してこれを実行できます。

axios.get('https://site.com/?name=Flavio')

またはあなたは使用することができますparamsオプションのプロパティ:

axios.get('https://site.com/', {
  params: {
    name: 'Flavio'
  }
})

POSTリクエスト

POSTリクエストの実行は、GETリクエストの実行と同じですが、代わりにaxios.get、 あなたが使うaxios.post

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

POSTパラメータを含むオブジェクトは2番目の引数です。

axios.post('https://site.com/', {
  name: 'Flavio'
})

私の無料ダウンロードNode.jsハンドブック


その他のノードチュートリアル: