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ハンドブック