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

前提として Browserify ＆ ES2015 な環境での例です。RxJS および axios は npm でパッケージ管理している環境であれば、それぞれ $ 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);
    });
  });

結果：

ほか

• 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);
      });
    });
  

• ソースコード全体はこちらに置いておきます。

  • hkusu/rxjs-axios-sample (GitHub)