JavascriptでPOSTリクエストを行う方法

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

Webアプリケーションを構築するときに、外部リソースにアクセスするためにHTTPリクエストを作成したい場合があります。たとえば、ブログを始めているとします。 APIを呼び出して、各ブログ投稿に表示するコメントのリストを取得することをお勧めします。

Axiosは、Webリクエストの作成に使用できる人気のあるJavaScriptライブラリです。このガイドでは、Axiosを使用してGETリクエストを行う方法について説明します。いくつかの例を見て、Axiosがどのように機能し、コードでどのように使用できるかを示します。

Axiosを使用する理由

Axiosは、Promiseベースのライブラリです。 Webリクエストを行う

疑問に思われるかもしれません:。他の多くのWebリクエストライブラリの1つでAxiosを使用する必要があるのはなぜですか? GETリクエストを作成するために使用できるextractのような他のライブラリがあることは事実ですが、Axiosには、これらのライブラリにはない多くの利点があります。

Axiosは、作成できる古いブラウザをサポートしています。よりアクセスしやすいユーザーエクスペリエンス。 Axiosには、脆弱性を防ぐためのCSRF保護機能も組み込まれています。また、Node.jsでも機能するため、フロントエンドとバックエンドの両方のWebアプリケーションを開発している場合に最適です。

Axiosのインストール方法

Axiosを使用してGETリクエストを作成する前に、ライブラリをインストールする必要があります。これを行うには、次のコマンドを使用します。

このコマンドはAxiosをインストールし、ローカルのpackage.jsonファイルに保存します。これで、Axiosライブラリの使用を開始する準備が整いました。

Axiosヘルプの申請方法

Axiosの使用を開始するのは簡単です。 Webリクエストを作成するには、リクエストデータを取得するURLと使用するメソッドを指定するだけです

チャット-ファクト次のコードを使用して実行できます:。

このコードは、このHTTPリクエストのデータを取得するためにまだ完了していないリクエストを表すpromiseを返します。次のような非同期/待機関数を使用します。

wiサーバーがチャットファクトのリストで応答しました。

この関数を呼び出すと、HTTPGETリクエストがchat-factsAPIに送信されます。非同期/待機関数を使用して、Webリクエストが完了するまでプログラムが続行されないようにします。これは、Axiosが最初にpromiseを返すためです。リクエストの完了後に行われたリクエストのデータを返します

Axiosライブラリには、リクエストを行うために使用できる短縮されたコマンドが含まれています。

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

このチュートリアルでは、axiosに焦点を当てます。 get()およびaxios.post()は、他のすべての短縮メソッドと同じ基本構文を使用します。

Axiosを使用してGETリクエストを作成する

最後の例では、AxiosにGETリクエストを行う機会があります。ただし、Axiosを使用してGETリクエストを行う簡単な方法があります。使用

axios.get()猫に関する事実のリストを取得したいとします。これは、返された数をカウントします。これは、次のコードを使用して実行できます。

コードはこの応答を生成しました:225のチャットファクトが返されました

コードを分解します。最初に、Webリクエストを行う getCatFacts()という非同期関数を宣言しました。

>

次に、 axios.get( )は、chat-facts APIからチャットファクトのリストを取得します。「Response.data」には、リクエストからのレスポンスオブジェクトとリクエストの本文が含まれます。

最後に、 .length属性を使用して、リクエストによって返されたcatファクトの数を計算します。次に、その数を文字列「catfactsreturned」に追加します。

Axiosを使用してヘッダーを送信する

GETリクエスト、カスタムヘッダーを現在のリソースWebサイトに送信する必要がある場合がありますリクエストしています。サイト認証を必要とするAPI。認証ヘッダーを指定する必要がある場合があります

<。 P> Axiosリクエストでヘッダーを指定するには、次のコードを使用できます。

このコードは、「header」ヘッダー名を送信します&rdquo;指定したURLに「ヘッダー値」を指定します。

Axiosを使用してパラメーターを送信する

多くのAPIを使用すると、GETリクエストでパラメーターを送信できます。たとえば、APIを使用すると、limitパラメータを使用して返される応答の数を制限できます。

Axiosを使用すると、Webリクエストで送信するパラメータを簡単に指定できます。パラメータをクエリ文字列として含めるか、paramsプロパティを使用できます。次に、クエリ文字列を使用してパラメータを指定するWebリクエストを作成するAxiosの例を示します。

次のコードを使用して、Axiosオプションでparamsプロパティを指定できます。

これらの2つの例は、「date」という名前と「05/15/2020"指定されたURLで。

Axiosを使用してPOSTリクエストを作成する方法

POSTリクエストを作成するための構文は、GETリクエストの場合と同じです。違いは、コード<> axios.post( ) axios.get()の代わりに。

公開APIにリクエストを送信するとします。これは、次のコードを使用して行うことができます。

GETリクエストを行うのと同じ方法でヘッダーとパラメーターを指定できます。たとえば、値が「James」のヘッダー「Name」をyoで送信するとします。 urPOSTリクエスト。次のコードを使用して実行できます。

結論

Axiosライブラリは、JavaScriptでWebリクエストを行うために使用されます。 JavaScriptを使用するフロントエンドと、Node.jsなどのプラットフォームを使用するバックエンドの両方で使用できます。他のWebクエリライブラリとは異なり、AxiosにはCSRF保護が組み込まれており、古いブラウザをサポートし、promiseフレームワークを使用します。Webリクエストの作成に最適です。

これで、GETおよびPOSTリクエストの作成を開始する準備が整いました。プロのWeb開発者のようにAxiosを使用します。