APIリクエストのためにAxiosを使用して乾燥させてください

バックエンドサーバーと通信するWebアプリケーションは、HTTPリクエストなしではできません。フロントエンドにはデータが必要なため、ネットワークHTTPリクエスト（または一般的にAJAXとして知られている）を介してデータを要求し、サーバーが回答を返します。ほとんどすべてのWebサイトがこれをどうにかしてこれを行います。

大規模なWebサイトの場合、このようなリクエストがさらに表示されることが期待できます。より多くのデータ、より多くのAPI、およびより多くの特別なケース。ウェブサイトのサイズが大きくなるにつれて、組織化され続けることが非常に重要です。古典的な概念は乾燥しています（繰り返さないでください）。これは、重複を防ぐためのコードを抽象化するプロセスを指します。これは、通常、コードを1回作成し、複数の場所で使用し、各インスタンスではなく単一の場所で更新できるため、理想的です。

ライブラリを使用して支援することもできます。 Ajaxにとって、Axiosは人気のある選択肢です。あなたはすでにそれに精通しているかもしれませんし、開発中にスタンドアロンの投稿や取得のためにそれを使用することもできます。

インストールと基本

NPM（またはYARN）を使用してインストールできます。

 npmインストールaxisos

Axiosを使用したスタンドアロンの投稿リクエストは次のようになります：

 axios.post（ 'https://axios-app.firebaseio.com/users.json'、formdata）
  .then（res => console.log（res））
  .catch（error => console.log（error））

ネイティブJavaScript JavaScriptコードを実行する方法もたくさんあります。 fetch（）であることは注目に値します。では、なぜライブラリを使用するのですか？まず第一に、Fetchのエラー処理は非常に奇妙です。最初から、Axiosを使用する方がはるかに簡単です。比較を見たい場合は、両方の方法をカバーする記事があり、別の記事でこの抽象的なメソッドの価値について説明します。

Axiosを使用するもう1つの理由は？それは私たちにもっと乾燥した機会を与えてくれるので、見てみましょう。

グローバル構成

axiosに付属のデフォルトオブジェクトを介して設定された標準構成を使用して、すべてのアプリケーション要求を処理するグローバル構成（メイン.jsファイルなど）を設定できます。

このオブジェクトには次のものが含まれています。

• baseurl：すべてのリクエストのプレフィックスとして使用される相対URL、および各リクエストをURLに添付できます。
• ヘッダー：リクエストに従って設定できるカスタムヘッダー
• タイムアウト：リクエストが中止された時点、通常はミリ秒で。デフォルト値は0です。つまり、適用できません。
• withcredentials：クロスサイトのアクセス制御要求に資格情報を使用する必要があるかどうかを示します。デフォルトはfalseです。
• ResponseType：サーバーが返すデータ型を示します。オプションには、JSON（デフォルト）、ArrayBuffer、ドキュメント、テキスト、ストリームが含まれます。
• ResponseConding：応答のデコードに使用されるエンコードを示します。デフォルト値はUTF8です。
• XSRFCOOKIENAME： XSRFトークン値として使用されるCookieの名前、デフォルト値はXSRF-Tokenです。
• XSRFHEADERNAME： XSRFトークン値をホストするHTTPヘッダーの名前。デフォルト値はx-xsrf-tokenです。
• MaxContentLength：許可されたHTTP応答コンテンツの最大サイズ（バイト単位）を定義します
• MaxBodyLength：許可されたHTTP要求コンテンツの最大サイズ（バイト単位）を定義します

ほとんどの場合、Baseurl、ヘッダー、そしておそらくタイムアウトのみを使用します。残りはスマートなデフォルトを持っているため、あまり一般的には使用されていませんが、リクエストを修正する必要がある場合は、その存在を知るのはいいことです。

これがDryが行うことです。各リクエストについて、APIのベースールを繰り返したり、各リクエストで必要な重要なヘッダーを繰り返す必要はありません。

APIにベースアドレスがある例を以下に示しますが、複数の異なるエンドポイントもあります。最初に、いくつかのデフォルト値を設定します。

 // main.js
「axios」からaxiosをインポートします。

axios.defaults.baseurl = 'https://axios-app.firebaseio.com' // url refix axios.defaults.head.get ['accept'] = 'application/json' //すべてのGet requests axios.defaults.headers.post ['accept' = 'application'/jsonこれらのヘッダーを設定することなく、より簡潔にAxiosがありますが、最終的なURLエンドポイントをカスタマイズする機会があります。

// form.jsコンポーネント「axios」からaxiosをインポートします。

デフォルトのエクスポート{
  方法：{
    onsubmit（）{
      // urlはhttps://axios-app.firebaseio.com/users.jsonになりました
      axios.post（ '/users.json'、formdata）
        .then（res => console.log（res））
        .catch（error => console.log（error））
    }
  }
}

注：この例はVUEにありますが、この概念はJavaScript環境にまで及びます。

カスタムインスタンス

カスタムインスタンスのセットアップは、グローバル構成に似ていますが、スコープは指定されたコンポーネントに制限されています。それで、それはまだ乾燥したテクノロジーですが、階層があります。

カスタムインスタンスを新しいファイル（authaxios.jsという名前）に設定し、「フォロー」コンポーネントにインポートします。

 // authaxios.js
「axios」からaxiosをインポートする

const custominstance = axis.create（{
  baseurl： 'https：//axios-app.firebaseio.com'
}）
custominstance.defaults.headers.post ['Accept'] = 'application/json'

//またはこのように...
const custominstance = axis.create（{
  baseurl： 'https：//axios-app.firebaseio.com'、
  ヘッダー：{'Accept'： 'Application/JSON'}
}）

次に、このファイルをフォームコンポーネントにインポートします。

 // form.jsコンポーネント// './authaxios'からaxiosをインポートする

デフォルトのエクスポート{
  方法：{
    onsubmit（）{
      axios.post（ '/users.json'、formdata）
        .then（res => console.log（res））
        .catch（error => console.log（error））
    }
  }
}

インターセプター

インターセプターは、グローバル構成またはカスタムインスタンスが一般的すぎる可能性がある状況を処理できます。つまり、オブジェクトにヘッダーを設定すると、影響を受けるコンポーネントの各要求に対してヘッダーに適用されます。インターセプターは、オブジェクトプロパティを動的に変更できます。たとえば、インターセプターで選択した条件に基づいて異なるヘッダーを送信できます（オブジェクトにヘッダーを設定した場合でも）。

インターセプターは、main.jsファイルまたはカスタムインスタンスファイルにあることができます。リクエストは送信された後に傍受され、応答の処理を変更することができます。

 //リクエストインターセプターAxios.interceptors.request.use（function（config）{
  //リクエストを送信する前に何かを行います。たとえば、特定のbaseurl（config.baseurl === 'https://axios-app.firebaseio.com/users.json'）のリクエストのみのタイムアウトを挿入します{
    config.timeout = 4000
  } それ以外 {
    configを返します
  }
  console.log（config）
  configを返します。
}、function（error）{
  //リクエストに応じていくつかの操作を実行します。
}）;

//応答インターセプターaxios.interceptors.response.use（function（response）{
  // Console.log、Headerの変更、条件付き動作の追加など、応答データの特定のアクションを実行します。応答ステータスに基づいてルートを変更するか、アラートボックスをポップアップします（Respons.status === 200 || Response.status === 201）{
    router.replace（ 'Homepage'）
  } それ以外 {
    アラート（「例外行動」）
  }
  console.log（応答）
  返信応答。
}、function（error）{
  //応答エラーでいくつかの操作を実行しますpromise.Reject（エラー）;
}）;

インターセプターは、名前が示すように、提供された条件に基づいて異なるアクションをとるために、要求と応答をインターセプトします。たとえば、上記の要求インターセプターでは、リクエストに特定のBaseurlがある場合にのみ条件タイムアウトを挿入します。応答については、ステータスコードに応じて、ルートの変更やアラートボックスの表示など、それを傍受して返すものを変更できます。異なるエラーコードに基づいて複数の条件を提供することもできます。

プロジェクトが拡大すると、さまざまなトリガーに基づいてサーバーと通信する多くのルートとネストされたルートがあり、インターセプターが非常に便利です。上記の条件に加えて、プロジェクトに応じて、インターセプターの使用を必要とする可能性のある他の多くの状況があります。

興味深いことに、インターセプターをポップアップして、影響を与えないようにすることができます。インターセプターを変数に割り当て、適切に指定されたポップアップメソッドを使用してポップアウトする必要があります。

 const reqinterceptor = axios.interceptors.request.use（function（config）{
  //リクエストを送信する前に何かを行います。たとえば、特定のbaseurl（config.baseurl === 'https://axios-app.firebaseio.com/users.json'）のリクエストのみのタイムアウトを挿入します{
    config.timeout = 4000
  } それ以外 {
    configを返します
  }
  console.log（config）
  configを返します。
}、function（error）{
  //リクエストに応じていくつかの操作を実行します。
}）;

//応答インターセプターconst resinterceptor = axios.interceptors.response.use（function（response）{
  // Console.log、Headerの変更、条件付き動作の追加など、応答データの特定のアクションを実行します。応答ステータスに基づいてルートを変更するか、アラートボックスをポップアップします（Respons.status === 200 || Response.status === 201）{
    router.replace（ 'Homepage'）
  } それ以外 {
    アラート（「例外行動」）
  }
  console.log（応答）
  返信応答。
}、function（error）{
  //応答エラーでいくつかの操作を実行しますpromise.Reject（エラー）;
}）;

axios.interceptors.request.eject（reqinterceptor）;
axios.interceptors.request.eject（resinterceptor）;

あまり一般的には使用されていませんが、インターセプターを条件付きステートメントに入れたり、特定のイベントに基づいて削除したりできます。

うまくいけば、これにより、Axiosがどのように機能するか、APIリクエストを乾燥した原則を維持するためにアプリケーションでそれを使用する方法をよく理解することができます。一般的なユースケースと構成をリストして表面に触れている間、Axiosには、要求をキャンセルしてクロスサイトのリクエスト偽造を防止する機能や、他の驚くべき可能性など、ドキュメントで探索できる他の多くの利点があります。

以上がAPIリクエストのためにAxiosを使用して乾燥させてくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。