RxJS 및 axios 비동기식으로 WEB API 결과를 얻는 간단한 예
5221 단어 JavaScriptRxJS
npm
에서 포장 관리를 하는 환경이라면 각각 $ 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 가져오기가 중복되면 아래와 같이 결과를 수령할 수 있습니다.
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);
});
});
원본 코드는 모두 여기에 두세요.
Reference
이 문제에 관하여(RxJS 및 axios 비동기식으로 WEB API 결과를 얻는 간단한 예), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hkusu/items/78fbf31051e6ee131731텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)