【JavaScript】axiosを使って、HTTP通信を簡単に操る。RailsJavaScriptPythonVue.jsRubyブロックチェーンHTML/CSSデザインCLOSEWebの技術は、無限大HOMEJavaScript【JavaScript】axiosを使って、HTTP通信を簡単に操る。tty007【JavaScript】axiosを使って、HTTP通信を簡単に操る。ツイートシェアはてブLINEPocket久しぶりの投稿です。最近色々勉強しまくってて、手を出しまくってる分野が増えてきているので自分の細かい抜け落ちた知識を補完する意味も込めて、今回はHTTP通信で用いることができるJavaScriptライブラリのaxiosについて記事を書いていこうと思います。対応ブラウザaxiosをインストールしてみようaxiosを使う準備をするGETリクエストを送るPOST通信の場合responseの構造を確認するエラーハンドリングタイムアウト設定まとめaxiosとはaxiosとは、HTTP通信を簡単に扱えることができるJavaScriptライブラリです。HTTPリクエストを送ったり、JSONを取得したりするのがより簡単になるので愛用者が多いのが特徴です。node.jsと一行で簡単に説明されています。要は、ブラウザとnode.jsに最適化された、PromiseベースのHTTPクライアントであるという事です。ここら辺、勉強している人であればなんとなく理解できるのですが、node.jsもPromiseも勉強していない人は「何を言っているんだ?」となりそうですね笑。安心してください、思ったより扱うのは簡単です。・XSRFに対するクライアントサポート有HTTPの仕組みを理解している人は、ふむふむなるほどという感じで雰囲気を掴み取ってください。わからない人はコードを見てその便利さを実感しましょう。対応ブラウザほぼ全てのブラウザに対応しています。IEに関しては8+から、基本的に最新版のブラウザに対応していますね。axiosをインストールしてみようaxiosでHTTP通信を行うにはまず、axios本体が必要です。npmでaxiosをインストールします。axiosこの様にしてインストールしましょう。CDNにも対応しています!気軽に使えるのでまずはこちらで試してみてもいいでしょう。CDNを使うにはスクリプトタグでこの様に記述します。src="https://unpkg.com/axios/dist/axios.min.js"></script>axiosを使う準備をするさて、axiosをインストールしたら、実際にコード内でaxiosを使用するための準備を行います。準備とは、axiosの読み込みです。'axios';GETリクエストを送るここまででaxiosを使う準備が整いました!まずはGETリクエストの例から解説していきます。});さて、axiosは上でも説明した通りPromiseベースです。GETリクエストを実現することができます。一部Promiseは書き方が少々煩雑で(理解できないほどではないですが...)、Promiseオブジェクトのインスタンスを作成したり、エラーハンドリングが難解な部分があるので実際に使うのはaxiosよりかはおすすめしません。axiosではメソッドチェーンのようにチェーンすることで非常にシンプルにプログラムを書くことができます。GETリクエストを送信する送信先のURL’)こうすることでGETリクエストを送ることが可能です。その後、.then()メソッドの中にresponseを引数に取ったコールバック関数を定義します。そこからメソッドチェーンで.chach()メソッドをチェーンすることでエラーをキャッチすることができます。非常にシンプルな構文です。function部分はES6構文でももちろん書くことが可能です。axiosにconfigオブジェクトを渡す書き方もできます。//200POST通信の場合POST通信はGET通信の時とほぼ同じで、GET通信はaxios.get()メソッドを使用するのに対してPOST通信はaxios.post()メソッドを使用するだけです。});ちなみに今回の例のpost()メソッドに渡すパラメータとしては、第1引数に通信先のURL、第2引数にconfigオブジェクトを渡しています。スポンサードリンクresponseの構造を確認するresponseオブジェクトには様々なデータが入ってるので、今一度確認しておきましょう。});基本的にはレスポンスデータを取得します。ステータスコード・テキスト等の用語がわからない方は、別途検索してみてください。ステータスコードが2xx系以外だと、レスポンスはエラーとして返されます。次に、エラーハンドリングの方法を解説します。エラーハンドリングaxiosのエラーハンドリングは非常に直感的です。このリクエストはレスポンスが返ってこない時に作成されます。});2xx系以外の時にエラーとして解釈されると書きましたが、自分でそのレンジを設定することも可能です。}})上の場合は5xx以外ならthen()で処理できるようなレンジに設定しています。タイムアウト設定HTTPリクエストにタイムアウト設定をすることも可能です。console.log(response.status));timeoutに設定する単位は[ms]なので、上の場合は1sのタイムアウトに設定しています。まとめaxiosでHTTP通信を操る方法、使い方について解説してみました。この記事はnpm公式のaxiosのページより例を参照して作成したので、より詳しい情報が知りたい方はこちらのURLに書かれているドキュメントを読んでみるのも良いかもしれません。axiosは慣れたら非常に使いやすいJavaScriptのライブラリだと思うので、これからしっかり活用していこうと思います。みなさんも是非使ってみて下さい。いった知識を1人で勉強することは可能ですが、効率よくプログラミングを学習したいのであれば「テックブースト」をオススメします。いったWebの疑問がオンラインで聞き放題です。無料カウンセリングも行なっているので一度話を聞きに行ってみるというのもアリだと思います。PM参考になりました!ありがとうござます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。【Bash】ターミナルのプロンプトを自在にカスタマイズする【Ajax入門】XMLHttpRequestの使い方をまとめてみたRECOMMENDこちらの記事も人気です。(TECH::CAMP)の無料説明会に行ったら衝撃の事実が発覚した件について【2019年最新】テックキャンプ(TECH::CAMP)の評判と料金、概要まとめ。実際の最新情報を解説します。