RxJS と axios で非同期に WEB-API の結果を取得する簡単な例

  • 4
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

前提として Browserify & ES2015 な環境での例です。RxJS および axiosnpm でパッケージ管理している環境であれば、それぞれ $ npm install rx$ npm install axios で導入できます。

axios は Promise に対応した HTTP クライアントです。HTTP 通信だけのために jQuery を導入するのはあれなので。

例として Qiita API v1 を利用して Qiita の新着投稿(10件) を取得するコードは次のようになります。

const Rx = require('rx'); // RxJS ライブラリの読み込み
const axios = require('axios'); // axios ライブラリの読み込み

// WEB-APIのベースURL(これは axios の機能)
axios.defaults.baseURL = 'http://qiita.com/api/v1'; 

// Qiita の新着投稿(10件) を取得して Rx のストリームへ流す
function getQiitaItems() {
  // Proimse を Obserbable に変換
  return Rx.Observable.fromPromise(axios.get('/items?per_page=10'));
}

// ストリームを購読
getQiitaItems()
  .subscribe((res) => {
    // 結果(10件)を forEach で順次処理
    res.data.forEach((item) => {
      // コンソールへ出力
      console.log(item.title);
    });
  });

結果:

スクリーンショット 2016-06-14 16.46.59.png

ほか

  • RxJS を導入するのは冗長だという場合は、次のように普通に Promise で結果を受け取ればよいです。

    • むしろプロジェクト全体の方針として Rx を利用していない場合は、素直にこっちの方がいいかも。
    const axios = require('axios');
    
    axios.defaults.baseURL = 'http://qiita.com/api/v1';
    
    axios.get('/items?per_page=10')
      .then((res) => {
        res.data.forEach((item) => {
          console.log(item.title);
        });
      });
    
  • ソースコード全体はこちらに置いておきます。