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');ブラウザサポート
<🎜>
リクエストを送信します
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
get jQueryと同様に、さまざまな種類のリクエストを実行するショートカットがいくつかあります。 delete、head、options、および
npm i axios
postput、patch、
// ES2015 风格导入
import axios from 'axios';
// Node.js 风格 require
const axios = require('axios');応答を受信< リクエストが行われた後、Axiosは応答オブジェクトまたはエラーオブジェクトに解決する約束を返します。
応答オブジェクト
<🎜>
then()
data：サーバーによって返されたHTTPコード。 status：サーバーによって返されるHTTPステータスメッセージ。 statusText：サーバーから返送されるすべてのヘッダー。 headers：元のリクエスト構成。 config：（ブラウザで実行するとき）実際のxmlhttprequestオブジェクト。 requestエラーオブジェクト：メッセージテキストをエラーします。
message
response
request
config変換およびインターセプターAxiosは、Angularのライブラリに触発されたいくつかの単純な機能を提供します。似ているように見えますが、ユースケースはわずかに異なります。 axiosを使用すると、リクエストを作成するときに設定できる2つの構成オプションの形式で出力または入力データを変換する関数を提供できます： 同じ方法で関数を 変換により出力データと入力データを変更することができますが、Axiosではインターセプターと呼ばれる関数を追加することもできます。コンバージョンと同様に、これらの機能はリクエストに添付したり、応答を受信したときに起動することもできます。 上記の例から気づいたかもしれないように、インターセプターと変換の間にはいくつかの重要な違いがあります。データまたはヘッダーを受信する代わりに、インターセプターは完全な要求構成または応答オブジェクトを受信します。インターセプターを作成するときは、エラーをキャッチして適切に処理できるエラーハンドラー関数を提供することもできます。リクエストインターセプターを使用して、ローカルストアからトークンを取得してすべてのリクエストで送信するなどの操作を実行できます。一方、応答インターセプターを使用して401の応答をキャプチャし、認証のためにログインページにリダイレクトできます。 サードパーティアドオン 人気のあるライブラリとして、Axiosはその機能を拡張するサードパーティライブラリエコシステムの恩恵を受けます。インターセプターからテストアダプター、ロガーまで、多くのツールが利用可能です。これがあなたが役に立つと思うかもしれないと思ういくつかのツールを紹介します： より多くのアドオンと拡張機能のリストは、Axios Githubリポジトリで入手できます。全体として、Axiosには多くのことが推奨されます。シンプルなAPIと、以前にjQueryを使用したことがある人に馴染みのある実用的で迅速な方法があります。その人気とさまざまなサードパーティアドオンの可用性により、フロントエンド、バックエンド、またはその両方であろうと、アプリケーションに含める信頼できるオプションになります。 axios faq（faq） AxiosとFetch APIは、どちらも人気のあるHTTPリクエストツールです。ただし、2つの間にはいくつかの重要な違いがあります。 Axiosは、ブラウザとnode.js環境で動作する約束ベースのHTTPクライアントです。 XMLHTTPRequestsおよびノード用のHTTPインターフェイスを処理するための単一のAPIを提供します。一方、Fetch APIは、リクエストと応答オブジェクトの共通の定義を提供します。これは、約束にも基づいています。ただし、Axiosとは異なり、Fetch APIはxmlhttprequestに基づいていません。これは、JavaScript ES6の組み込みモジュールです。 axiosは、エラーを処理する強力な方法を提供します。 AXIOS要求中にエラーが発生すると、拒否され、エラーオブジェクトが表示されます。エラーオブジェクトには、エラーメッセージ、HTTPステータスコード、要求および応答オブジェクトなど、エラーの原因に関する情報が含まれています。 Try/Catchブロックまたは約束のキャッチ方法を使用して、このエラーをキャッチできます。 はい、axiosは反応に利用できます。実際、ReactアプリケーションでHTTPリクエストを作成するための一般的な選択肢です。 Axiosを使用してReactからAPIからデータを取得し、コンポーネントに表示できます。 ReactのAxios要求は、 ファクトリーメソッドを使用して実行できます。リクエストをキャンセルする場合は、ソースオブジェクトの メソッドを使用して、URLとデータをパラメーターとして渡すことができます。データは、要求されたペイロードを表すJavaScriptオブジェクトである必要があります。 Axiosを使用すると、各リクエストで送信されるデフォルトのヘッダーを設定できます。これは、axiosインスタンスの
メソッドを使用できます。 メソッドを使用して実行できます。 Axiosリクエストによって返されたPromise Arrayを 以上がAxios Beginner＆＃x27; s Guide：便利な約束ベースのHTTPクライアントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。変換
transformRequestおよびtransformResponse。両方のプロパティは、データを渡す複数の関数をリンクできる配列です。 transformRequestに渡された関数は、リクエスト、ポスト、パッチのリクエストに適用されます。リクエストデータとヘッダーオブジェクトをパラメーターとして受信し、変更されたデータオブジェクトを返す必要があります。 npm i axios
transformResponseに追加できますが、応答データを使用してリンクされたthen()コールバックに応答を渡す前にのみ呼び出します。では、コンバージョンは何のために使用できますか？潜在的なユースケースは、XMLやCSVなどの特定の形式でデータを受信すると予想されるAPIを処理することです。コンバージョンのペアをセットアップして、出力データと入力データをAPIに必要な形式に変換し、その形式から変換できます。 AxiosのデフォルトtransformRequestおよびtransformResponse関数は、データをJSONに通信し、自分の関数がそれらの変換をオーバーライドすることを指定することは注目に値します。 インターセプター
// ES2015 风格导入
import axios from 'axios';
// Node.js 风格 require
const axios = require('axios');
mock-adapter：テストコードを容易にするためにリクエストを簡単にシミュレートできます。 cache-plugin：選択的にキャッシュするためのラッパーがリクエストをキャッシュします。 redux-axios-middleware：Reduxユーザーの場合、このミドルウェアは、通常の古い操作を使用してAJAXリクエストをスケジュールするクリーンな方法を提供します。 AxiosとFetch APIの違いは何ですか？
axiosを使用してエラーを処理する方法は？
反応でaxiosを使用できますか？
componentDidMountフックで作成できます。 useEffect
Axiosは、リクエストをキャンセルするメカニズムを提供します。これは、CancelToken.sourceメソッドを呼び出してください。 cancel
axiosを使用して投稿リクエストを簡単に作成するのは簡単です。 axiosインスタンスのpost
はい、axiosはvue.jsで利用できます。 vue.jsアプリケーションでHTTPリクエストを作成するための一般的な選択肢です。 vue.jsのaxiosを使用してAPIからデータを取得し、コンポーネントに表示できます。
axiosでデフォルトのヘッダーを設定する方法は？
defaultsプロパティを使用して実行できます。ヘッダーを表すjavaScriptオブジェクトにdefaultsオブジェクトのプロパティを設定できます。 headers
はい、axiosはnode.js環境で使用できます。 XMLHTTPRequestsおよびノード用のHTTPインターフェイスを処理するための単一のAPIを提供します。これにより、JavaScriptでHTTPリクエストを作成するための汎用性の高いツールになります。
axiosを使用して要求が行われると、応答オブジェクトとして解析された約束を返します。このオブジェクトには、サーバーから返されたデータ、リクエストのステータス、ヘッダー、およびその他の情報が含まれています。この応答を処理するには、Promiseのthen
はい、Axiosを使用すると、同時に複数のリクエストを行うことができます。これは、axios 'allメソッドに渡します。これは、すべてのリクエストが完了したときに解析される新しい約束を返します。 all
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
