javascript react プログラミング 開発ノウハウ

非同期通信でreactのcomponentをレンダリングする方法

投稿日:

 

こんにちは、mabuiです。
前回、reactのレンダリング処理を説明しましたが、
それを使いつつ、javascriptの非同期通信でcoinmarketcapのapiを叩いて
仮想通貨ランキング上位10銘柄の情報を取得し、
簡単なhtmlのテーブル構造で出力するサンプルを作成していきます。

 

coinmarketcapとは?

coinmarketcapは仮想通貨の全銘柄を独自ランキング順に閲覧できるサイトです。
Cryptocurrency Market Capitalizations | CoinMarketCap
apiを公開しており、仮想通貨情報の取得がプログラムから容易なため、
今回こちらのapiを使用して、仮想通貨上位10銘柄の情報を取得します。
https://api.coinmarketcap.com/v2/ticker/?limit=10&sort=rank

 

javascriptでのPromiseを使用した非同期通信

実行した処理を応答が返るまで待つ同期通信とは違い、
非同期通信では処理を投げた後に次の処理を始めます。
そのため応答を受け取るタイミングが不確定で扱いが難しくなります。

今回サンプルで使用しているisomorphic-fetchというライブラリのfetchメソッドでは、
非同期通信を行い、外部のapiにリクエストを送っています。

fetchの返り値にはPromiseオブジェクトが返ってきます。
Promiseオブジェクトではthenメソッドを使うことで返り値に対して
順序立てて処理を実行することが可能です。

サンプルではコンストラクタ内で非同期通信を行うメソッドを実行していますが、
そのままだとレンダリング中に応答が返ってこないためレスポンスの表示ができません。
setTimeoutメソッドを使って通信の実行を少し遅らせることでsetStateメソッドが反応して
2回目のレンダリングが実行されます。

 

サンプルコード

出力結果

ソースコードを実行すると、画像のようにリスト形式で
仮想通貨のファンダメンタル情報が表示されます。

 

おわりに

いかがでしたでしょうか?
reactのコア機能であるrenderを使って実際にプログラムを作成するイメージが掴めたかと思います。
今回は基本的な機能しか扱っていませんが、これをベースにreact関連のモジュールを追加して
いけば、より実用的なプログラムになっていくと思います。

 

追記

Reactに用意されているcomponentWiiMountメソッドを使用して
setState()すれば、更新後の値を使用して一度だけrenderが実行されるとのことで
試してみました。

確かにコンストラクタと同じく出力はうまくいきましたが、renderは二度呼ばれるようで、
setTimeoutを使用しなくても二度呼ばれました(出力はうまくいかない)。
非同期通信の場合だと勝手が違うようです。

 

-javascript, react, プログラミング, 開発ノウハウ
-, ,

Copyright© 仮想通貨始めました , 2018 All Rights Reserved Powered by STINGER.