RxJS 및 axios 비동기식으로 WEB API 결과를 얻는 간단한 예

5221 단어 JavaScriptRxJS
전제는 Browserify &ES 2015 환경의 예입니다.RxJSaxiosnpm에서 포장 관리를 하는 환경이라면 각각 $ npm install rx$ npm install axios에서 가져올 수 있다.
axios는 HTTP 클라이언트Promise를 지원합니다.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 가져오기가 중복되면 아래와 같이 결과를 수령할 수 있습니다.
  • 차라리 사업 전반의 방침으로 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)
  • 좋은 웹페이지 즐겨찾기