Axios を使用した JavaScript での単純な HTTP リクエスト

JavaScript の学習に興味がありますか? jshandbook.com で私の電子ブックを入手してください

はじめに

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

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

これは promise ベースであり、これにより async/await コードを記述して XHR リクエストを非常に簡単に実行できます。

Axios を使用すると、ネイティブの Fetch API よりも多くの利点があります。

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

インストール

Axios は npm を使用してインストールできます:

npm install axios

または糸:

yarn add axios

または、unpkg.com を使用してページに含めるだけです:

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

Axios API

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

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

ただし、便宜上、通常は

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

(jQuery と同様に、$.get() を使用します) と $.post() $.ajax() の代わりに )

Axios はすべての HTTP 動詞のメソッドを提供します。これらはあまり一般的ではありませんが、まだ使用されています:

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

また、ボディを破棄してリクエストの HTTP ヘッダーを取得する方法も提供します。

GET リクエスト

Axios を使用する便利な方法の 1 つは、最新 (ES2017) の async/await 構文を使用することです。

この Node.js の例では、axios.get() を使用して、Dog API にクエリを実行し、すべての犬種のリストを取得します。 、そしてそれらを数えます:

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 を使用したくない場合は、Promises 構文を使用できます:

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 応答には、次のように URL にパラメーターを含めることができます:https://site.com/?foo=bar .

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 で私の電子ブックを入手してください