この記事では、axios の初心者向けに、axios の詳細な紹介と基本的な使い方を説明します (1)

アクシオスの紹介

フロントエンドプレーヤーとして、http ネットワークリクエストを送信することが絶対に必要であると私は考えています。このとき、ブラウザが提供するAPIであるAjaxを利用します。ただし、Ajax を使用するには、毎回 XMLHttpRequest コンストラクターを通じて新しい XML (ミニオン) インスタンスを作成し、次にリクエスト本文を準備して http リクエストを送信し、最後に XHR の onreadystatechange を通じて状態を監視して返された。データ Ajax を複数の場所で使用すると、コード量が非常に複雑になり、メンテナンスも非常に困難になります。ネイティブJSを使って開発するのと同様に、拡張性や保守性が保証されず、チームワークが難しく、開発効率が低くなります。この場合、フロントエンドのネイティブ JS には前任者によって開発されたフレームワークがあり、Ajax にも独自のフレームワークである Axios があります。

Axios は、ブラウザーおよびNode.js用の Promise ベースのネットワークリクエストライブラリです。Ajax リクエストは非同期であるため、そのカプセル化は、非同期処理を処理するために特別に設計された API である Promise に基づいて実装されます。したがって、その後のデータ受信では、通常は .then で動作します。

Axios には次の機能があります。

1.ブラウザから XMLHttpRequestsを作成します。Axios は、後で使用できるようにパッケージ内に新しいインスタンスオブジェクトを作成しました。使用中の axios の作成については気にしません。

2.node.jsからhttp リクエストを作成すると、 それをノード環境で直接使用できるようになります。

3. Promise APIがサポートされています 。axios は Promise に基づいたカプセル化操作であるため、その後の使用では同期と非同期についてあまり気にする必要がありません。

4.リクエストとレスポンスのインターセプト: Axios は強力なリクエストとレスポンスのインターセプト API を提供しており、リクエストを送信してデータを返す前に独自の論理操作を定義できます。

5.リクエスト・レスポンスデータの変換は、axiosが提供するtransformRequestやtransformResponseapiなどのAPIを利用することで、送信・応答時にデータ本体を任意に変換することができます。

6.リクエストをキャンセルします。cancelToken API を使用して、最後に送信されたリクエストをキャンセルします。通常は、スロットルと同様に、ユーザーが必死にリクエストを送信する状況に対処します。サーバーがデータに応答するまで次のリクエストは許可されません。。

7. JSON データを自動的に変換する: axios によって返されるデータは直接 JS オブジェクトタイプであるため、JSON.parse の string-to-object メソッドを使用する必要はありません。

8.クライアントはXSRFに対する防御をサポートします

アクシオスの紹介

HTML ファイルで axios を使用する場合は、次のコードを通じて axios を導入できます。

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.min.js"></script>

プロジェクトで使用されている場合は、npm install axios によって直接インストールできます。

axios での get リクエストと post リクエストの基本的な使用法

同じものは get リクエストであり、axios では 2 つの方法で実装できます。

1. get 関数を呼び出すことで実現されます。ここでのパラメーターは、URL パスの後ろに結合された文字列にすることも、構成オブジェクト {params:{パラメーター名: 値}} を渡すこともできます

axios.get('http://localhost:3000/user?ID=12345')
  .then((response) => {
    // 处理成功情况
    console.log(response);
  })
  .catch((error) =>  {
    // 处理错误情况
    console.log(error);
  })

// 如果不写.get的话，默认是get请求
axios('/user,{params:{ID: 12345}}).then((response) => {})

2. axios の実装を直接呼び出すことにより、設定オブジェクトがここに渡されます。

axios({
	method: "GET",
	url: "http://localhost:3000/user?ID=12345",
    // 或者
    // url: "http://localhost:3000/user",
    // {params:{ID：12345}}
}).then((response) => {
    // 处理成功情况
    console.log(response);
  })
  .catch((error) =>  {
    // 处理错误情况
    console.log(error);
  })

Axios は非同期/待機書き込みもサポートします

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

通常、Post リクエストはサーバーにデータを送信するために使用されます。それがどのように記述されるかを見てみましょう。

axios({ // 发送AJAX请求
	// 请求类型
	method: "POST",
	// 需要提交数据的URL路径
	url: "http://localhost:3000/posts",
	// 设置发送的数据体(新增内容)
	data: {
	    title: "已经步入深秋了，树叶渐渐的开始下落了！",
	    author: "不读诗意",
    }
}).then((response) => {
    console.log(response);
})
.catch((error) => {
    console.log(error);
})

このトピックには、axios についての一連の詳細な研究もあります。お役に立てば幸いです。