Edited at

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

More than 3 years have passed since last update.

前提として 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);
    });
    });




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