Axios Beginner＆＃x27; s Guide：便利な約束ベースのHTTPクライアント

axiosのキーポイント

• Axiosは、ブラウザやnode.js環境で使用できる使いやすいAPIを備えた人気のある約束ベースのHTTPクライアントです。 JavaScript開発者に汎用性の高いツールを提供します。
• axiosは、HTTPエラーコードの処理、リクエストへのCookieの自動包含、アップロード/ダウンロードの進行状況の更新を含む、いくつかの方法で組み込みのフェッチAPIとは異なります。
• axiosを使用すると、開発者は出力または入力データを変換し、インターセプター、リクエストが行われたときにトリガーされる関数を追加できます。これらの機能は、データの処理とリクエストと応答の管理に柔軟性を提供します。
• axiosの機能を拡張するために、強力なサードパーティライブラリエコシステムが存在します。これらのアドオンは、インターセプターとテストアダプターからロガーにカバーし、異なるユースケースでAxiosの機能を強化します。

Axiosは、使いやすいAPIを備えた人気のある約束ベースのHTTPクライアントであり、ブラウザーとnode.js環境で使用できます。データを取得または保存するためにHTTPリクエストを作成することは、クライアントJavaScriptアプリケーションの最も一般的なタスクの1つです。サードパーティライブラリ（特にjQuery）は、長い間、長いブラウザAPIと対話し、クロスブラウザーの違いを排除するための一般的な方法でした。人々が徐々にjQueryを放棄し、Native Dom APIまたはReactやVue.jsなどのフロントエンドUIライブラリを改善するにつれて、$ .AJAX機能のためだけにそれを含めることは無意味になります。コードでAxiosを始めて、JavaScript開発者の間で人気を博しているいくつかの機能について学びましょう。

axios vs. fetchの比較

最新のブラウザに新しいフェッチAPIが組み込まれていることをすでに知っているかもしれませんが、なぜそれを使用しないのですか？ 2つの間にはいくつかの違いがありますが、多くの人がAxiosをより有利にすると考えています。違いの1つは、これらの2つのライブラリがHTTPエラーコードを処理する方法です。 Fetchを使用する場合、サーバーが4xxまたは5xxシリーズエラーを返す場合、Catch（）コールバックはトリガーされず、開発者は応答ステータスコードをチェックしてリクエストが成功したかどうかを判断する必要があります。一方、これらのステータスコードの1つが返された場合、Axiosは約束の要求を拒否します。 APIに慣れていない開発者をよく混同することが多い別の小さな違いは、Fetchがリクエストを行うときにCookieをサーバーに自動的に送信しないことです。それらを含めるには、オプションを明示的に渡す必要があります。 Axiosはあなたをサポートするためにここにいます。一部の人にとっては、障壁になる可能性のある違いの1つは、アップロード/ダウンロードの進行状況の更新です。 Axiosは古いXHR APIの上に構築されているため、OnuploAdProgressとOnDownLoadProgressのコールバック関数を登録して、アプリケーションのUIの完了率を表示できます。現在、Fetchはこの機能をサポートしていません。最後に、axiosはブラウザとnode.jsで利用できます。これにより、ブラウザとバックエンドの間でJavaScriptコードを共有したり、フロントエンドアプリケーションのサーバー側のレンダリングを実行したりできます。 注：NodeにはFetch APIのバージョンが利用可能ですが、私の意見では、Axiosが提供する他の機能により、より有利になります。

インストール

ご想像のとおり、Axiosをインストールする最も一般的な方法は、NPMパッケージマネージャーを使用することです。

そして、必要な場所にコードに含めます：

npm i axios

何らかのモジュールバンドラー（Webpackなど）を使用していない場合は、従来の方法でCDNからライブラリをいつでも抽出できます。

// ES2015 风格导入
import axios from 'axios';

// Node.js 风格 require
const axios = require('axios');

ブラウザサポート

<🎜>

Axiosは、すべての最新のWebブラウザーとInternet Explorer 8で実行されます。

リクエストを送信します

jqueryの$ .ajax関数と同様に、オプションオブジェクトをaxiosに渡すことにより、あらゆるタイプのHTTP要求を作成できます。

ここでは、どのhttpメソッドを使用するか（get/post/deleteなど）、およびどのURLをリクエストする必要があるかを伝えます。また、単純なキー/値ペアJavaScriptオブジェクトの形でリクエストで送信されるデータも提供します。デフォルトでは、AxiosはJSONにシリアル化し、リクエスト本体として送信します。

オプションのリクエスト

axios({
  method: 'post',
  url: '/login',
  data: {
    user: 'brunos',
    lastName: 'ilovenodejs'
  }
});

リクエストを行うとき、他の多くのオプションを渡すことができますが、ここに最も一般的なオプションがいくつかあります：

• baseUrl：ベースURLを指定すると、使用する相対URLに添付されます。
• headers：ヘッダーとして送信されるキー/値ペアのオブジェクト。
• params：シリアル化され、URLへのクエリ文字列として追加されるキー/値ペアオブジェクト。
• responseType：予想される応答形式がjsonではない場合、このプロパティをarraybuffer、blob、document、text、stream、または
に設定できます。
• auth
：ユーザー名とパスワードフィールドを渡すオブジェクトは、これらの資格情報を使用して、リクエストでHTTP Basic認証を実行します。

便利な方法

get jQueryと同様に、さまざまな種類のリクエストを実行するショートカットがいくつかあります。 delete、head、options、および

メソッドはすべて、URLとオプションの構成オブジェクトの2つのパラメーターを受け入れます。

npm i axios

postput、patch、

メソッドは、データオブジェクトを2番目のパラメーターとして、オプションの構成オブジェクトを3番目のパラメーターとして使用します。

// ES2015 风格导入
import axios from 'axios';

// Node.js 风格 require
const axios = require('axios');

応答を受信リクエストが行われた後、Axiosは応答オブジェクトまたはエラーオブジェクトに解決する約束を返します。

応答オブジェクト

<🎜>

リクエストが成功した場合、

コールバックは次のプロパティを持つ応答オブジェクトを受信します。

then()

：サーバーによって返されるペイロード。デフォルトでは、AxiosはJSONを期待し、それをJavaScriptオブジェクトに解析します。

• data：サーバーによって返されたHTTPコード。
• status：サーバーによって返されるHTTPステータスメッセージ。
• statusText：サーバーから返送されるすべてのヘッダー。
• headers：元のリクエスト構成。
• config：（ブラウザで実行するとき）実際のxmlhttprequestオブジェクト。
• requestエラーオブジェクト

リクエストに問題がある場合、約束は拒否され、エラーオブジェクトが表示されます。これには、少なくとも次のプロパティが含まれています。

：メッセージテキストをエラーします。

• ：前のセクションで説明されている応答オブジェクト（受け取った場合）。 message
• ：（ブラウザで実行するとき）実際のxmlhttprequestオブジェクト。 response
• ：元のリクエスト構成。 request
• config変換およびインターセプター

Axiosは、Angularのライブラリに触発されたいくつかの単純な機能を提供します。似ているように見えますが、ユースケースはわずかに異なります。

変換

axiosを使用すると、リクエストを作成するときに設定できる2つの構成オプションの形式で出力または入力データを変換する関数を提供できます：transformRequestおよびtransformResponse。両方のプロパティは、データを渡す複数の関数をリンクできる配列です。 transformRequestに渡された関数は、リクエスト、ポスト、パッチのリクエストに適用されます。リクエストデータとヘッダーオブジェクトをパラメーターとして受信し、変更されたデータオブジェクトを返す必要があります。

npm i axios

同じ方法で関数をtransformResponseに追加できますが、応答データを使用してリンクされたthen()コールバックに応答を渡す前にのみ呼び出します。では、コンバージョンは何のために使用できますか？潜在的なユースケースは、XMLやCSVなどの特定の形式でデータを受信すると予想されるAPIを処理することです。コンバージョンのペアをセットアップして、出力データと入力データをAPIに必要な形式に変換し、その形式から変換できます。 AxiosのデフォルトtransformRequestおよびtransformResponse関数は、データをJSONに通信し、自分の関数がそれらの変換をオーバーライドすることを指定することは注目に値します。

インターセプター

変換により出力データと入力データを変更することができますが、Axiosではインターセプターと呼ばれる関数を追加することもできます。コンバージョンと同様に、これらの機能はリクエストに添付したり、応答を受信したときに起動することもできます。

// ES2015 风格导入
import axios from 'axios';

// Node.js 风格 require
const axios = require('axios');

上記の例から気づいたかもしれないように、インターセプターと変換の間にはいくつかの重要な違いがあります。データまたはヘッダーを受信する代わりに、インターセプターは完全な要求構成または応答オブジェクトを受信します。インターセプターを作成するときは、エラーをキャッチして適切に処理できるエラーハンドラー関数を提供することもできます。リクエストインターセプターを使用して、ローカルストアからトークンを取得してすべてのリクエストで送信するなどの操作を実行できます。一方、応答インターセプターを使用して401の応答をキャプチャし、認証のためにログインページにリダイレクトできます。

サードパーティアドオン

人気のあるライブラリとして、Axiosはその機能を拡張するサードパーティライブラリエコシステムの恩恵を受けます。インターセプターからテストアダプター、ロガーまで、多くのツールが利用可能です。これがあなたが役に立つと思うかもしれないと思ういくつかのツールを紹介します：

• mock-adapter：テストコードを容易にするためにリクエストを簡単にシミュレートできます。
• cache-plugin：選択的にキャッシュするためのラッパーがリクエストをキャッシュします。
• redux-axios-middleware：Reduxユーザーの場合、このミドルウェアは、通常の古い操作を使用してAJAXリクエストをスケジュールするクリーンな方法を提供します。

より多くのアドオンと拡張機能のリストは、Axios Githubリポジトリで入手できます。全体として、Axiosには多くのことが推奨されます。シンプルなAPIと、以前にjQueryを使用したことがある人に馴染みのある実用的で迅速な方法があります。その人気とさまざまなサードパーティアドオンの可用性により、フロントエンド、バックエンド、またはその両方であろうと、アプリケーションに含める信頼できるオプションになります。

axios faq（faq）

AxiosとFetch APIの違いは何ですか？

AxiosとFetch APIは、どちらも人気のあるHTTPリクエストツールです。ただし、2つの間にはいくつかの重要な違いがあります。 Axiosは、ブラウザとnode.js環境で動作する約束ベースのHTTPクライアントです。 XMLHTTPRequestsおよびノー​​ド用のHTTPインターフェイスを処理するための単一のAPIを提供します。一方、Fetch APIは、リクエストと応答オブジェクトの共通の定義を提供します。これは、約束にも基づいています。ただし、Axiosとは異なり、Fetch APIはxmlhttprequestに基づいていません。これは、JavaScript ES6の組み込みモジュールです。

axiosを使用してエラーを処理する方法は？

axiosは、エラーを処理する強力な方法を提供します。 AXIOS要求中にエラーが発生すると、拒否され、エラーオブジェクトが表示されます。エラーオブジェクトには、エラーメッセージ、HTTPステータスコード、要求および応答オブジェクトなど、エラーの原因に関する情報が含まれています。 Try/Catchブロックまたは約束のキャッチ方法を使用して、このエラーをキャッチできます。

反応でaxiosを使用できますか？

はい、axiosは反応に利用できます。実際、ReactアプリケーションでHTTPリクエストを作成するための一般的な選択肢です。 Axiosを使用してReactからAPIからデータを取得し、コンポーネントに表示できます。 ReactのAxios要求は、 orcomponentDidMountフックで作成できます。 useEffect

axiosでリクエストをキャンセルする方法は？

Axiosは、リクエストをキャンセルするメカニズムを提供します。これは、

ファクトリーメソッドを使用して実行できます。リクエストをキャンセルする場合は、ソースオブジェクトのCancelToken.sourceメソッドを呼び出してください。 cancel

axiosを使用してPOSTリクエストを作成するにはどうすればよいですか？

axiosを使用して投稿リクエストを簡単に作成するのは簡単です。 axiosインスタンスの

メソッドを使用して、URLとデータをパラメーターとして渡すことができます。データは、要求されたペイロードを表すJavaScriptオブジェクトである必要があります。 post

vue.jsでaxiosを使用できますか？

はい、axiosはvue.jsで利用できます。 vue.jsアプリケーションでHTTPリクエストを作成するための一般的な選択肢です。 vue.jsのaxiosを使用してAPIからデータを取得し、コンポーネントに表示できます。

axiosでデフォルトのヘッダーを設定する方法は？

Axiosを使用すると、各リクエストで送信されるデフォルトのヘッダーを設定できます。これは、axiosインスタンスのdefaultsプロパティを使用して実行できます。ヘッダーを表すjavaScriptオブジェクトにdefaultsオブジェクトのプロパティを設定できます。 headers

node.js環境でaxiosを使用できますか？

はい、axiosはnode.js環境で使用できます。 XMLHTTPRequestsおよびノー​​ド用のHTTPインターフェイスを処理するための単一のAPIを提供します。これにより、JavaScriptでHTTPリクエストを作成するための汎用性の高いツールになります。

axiosで応答を処理する方法は？

axiosを使用して要求が行われると、応答オブジェクトとして解析された約束を返します。このオブジェクトには、サーバーから返されたデータ、リクエストのステータス、ヘッダー、およびその他の情報が含まれています。この応答を処理するには、Promiseの

メソッドを使用できます。 then

axiosを使用して複数のリクエストを行うことはできますか？

はい、Axiosを使用すると、同時に複数のリクエストを行うことができます。これは、axios '

メソッドを使用して実行できます。 Axiosリクエストによって返されたPromise Arrayをallメソッドに渡します。これは、すべてのリクエストが完了したときに解析される新しい約束を返します。 all

以上がAxios Beginner＆＃x27; s Guide：便利な約束ベースのHTTPクライアントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。