Axiosを使ってAPIリクエストを作成する
3893 ワード
導入
私は反応と物質のUIを使用してプロジェクトに取り組んでいた.このプロジェクトでは、サーバーからデータを取得する必要がありました.若干の研究と実践の後、私は概念を理解して、Axiosを使ってデータを得ることができました.
それで、私はあなたがAxiosの基礎から始められるように、このポストを書きました.
この記事の終わりには、サーバーからデータを取得することができます.
アクシオス
Axiosは、ブラウザとノードの単純な約束ベースのHTTPクライアントです.jsAxiosは、非常に拡張性の高いインターフェイスを持つ小さなパッケージのライブラリを使用して簡単に提供しています.
AxiosはHTTPリクエストを送信するために使用される約束のベースのJavaScriptライブラリです.JavaScriptのnative fetch ()関数の代替案として考えることができます.
機能
XSRF
インストール
NPMを使う
$ npm install axios
$ yarn add axios
HTTPリクエストはどこですか?
クラスベースのコンポーネントでは、リクエストはComponentDidmount () LifeCycleで行われますが、機能的コンポーネントでは、リクエストが生成されます.
AxiosはGET、POST、DELETE、PUTなどのいくつかのリクエストメソッドをサポートします.
私たちの主な焦点は、一般的に使用されるGETとPOSTメソッドになります.
getメソッドを使用したaxiosのデータ取得
axiosは少なくとも一つの引数(url)を持つgetメソッドを提供します.
例えば、
axios.get('url')
.then(response => {
console.log(response);
});
上記のコードはaxiosを使った単純なAPIフェッチです.さて、説明しましょう.
Axiosは約束を使うgetは' then 'という約束を返します.
コードでは、サーバーから取得したデータがGetAPIと呼ばれる変数に渡され、ライフサイクルフックで呼び出された矢印関数を作成します.番目のパラメータ[]空配列は、ライフサイクルフックが一度だけ実行されるように渡されました.
APIから戻ってきた応答の中で、我々はデータを必要とするだけです.データが状態で渡されます.
出力は次のようになります.
エラー処理
URLや構文でエラーが発生した場合は、どうやってエラーを処理しますか.
このエラーを処理するには、メソッドの後に取得したエラーをキャッチするcatchメソッドを追加します.
.catch ((error) {
console.log(error)
});
サーバからデータを取得する
async/waitの構文を使用するには、axiosをラップする必要があります.get ()関数は、async関数の中で呼び出します.エラーを捕捉できるように、try - catchブロックを使ってメソッド呼び出しを終了します.HTTPデータを受け取る変数“Response”は、待機する前に非同期データを受信するのを待つために待機していなければなりませんでした.
結論
このポストでは、Axiosを使用してHTTPリクエストをサーバーにどのようにするかを学びました.また、我々はPromiseとAsync/Waitを使用してサーバーからデータを取得することができました.私は、この記事があなたにAxios旅行を素晴らしいものにしたと確信します.あなたは、公式の文書を読んで、それについてもっと学ぶためにAxiosに得ることができます.
Reference
この問題について(Axiosを使ってAPIリクエストを作成する), 我々は、より多くの情報をここで見つけました https://dev.to/yatharthnigam/using-axios-with-react-to-make-api-requests-2jn2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol