0.4.0 • Published 8 years ago
observable-api v0.4.0
observable-api
API client based on Observables (RxJS)
Prerequisites
- Npm: You have to have RxJS installed if using as npm package.
- Bower & CDN: You have to have RxJS library loaded before observable-api if using as bower component or from CDN.
Installing
Using cdn:
<script src="https://npmcdn.com/observable-api/lib/dist/observable-api.js"></script>
Using npm:
$ npm install observable-api
Using bower:
$ bower install observable-api
Example
Creating API
import {createAPI, jQueryAdapter} from 'observable-api';
const adapter = jQueryAdapter(jQuery);
const API = createAPI(adapter);
Creating API endpoint
const usersEndpoint = API.createEndpoint('/users', 'GET');
Selecting data from endpoint
const users$ = usersEndpoint.response$.map(res => res.data);
Making requests and using the data
// Request to the endpoint is made on the first subscription
users$.subscribe(users => {
console.log(users);
});
// Subsequent subscriptions will use data from the latest request
users$.subscribe(users => {
console.log(users);
});
// To force new request to the endpoint
usersEndpoint.fetch();
// Fetch can receive optional parameters and data
usersEndpoint.fetch(params, data); // returns usersEndpoint instance
Combining the data jsbin
// Using jQuery.ajax for making XHR requests
const adapter = ObservableAPI.jQueryAdapter(jQuery);
const api = ObservableAPI.create(adapter)
// Fake data base url
const baseURL = 'https://jsonplaceholder.typicode.com';
// Creating endpoints
const postsEndpoint = api.createEndpoint(`${baseURL}/posts`, 'GET');
const posts$ = postsEndpoint.response$;
const usersEndpoint = api.createEndpoint(`${baseURL}/users`, 'GET');
const users$ = usersEndpoint.response$;
// Creating custom data selectors
const usersById$ = users$.scan((byId, users) => {
users.forEach(user => byId[user.id] = user);
return byId;
}, {});
const postsWithUsers$ = Rx.Observable.combineLatest(
usersById$,
posts$,
(usersById, posts) => {
return posts.map(post => Object.assign({}, post, {
user: usersById[post.userId]
}));
}
);
// Printing the result
postsWithUsers$.subscribe(posts => {
console.log(posts[0]);
});
Use latest results with ease jsbin
// Using jQuery.ajax for making XHR requests
const adapter = ObservableAPI.jQueryAdapter(jQuery, {
dataType: 'jsonp',
jsonp: 'callback'
});
const api = ObservableAPI.create(adapter);
// creating endpoint
const endpointURL = ({term}) => `https://en.wikipedia.org/w/api.php?action=opensearch&search=${term}&limit=3`;
// Creating endpoints
const searchEndpoint = api.createEndpoint(endpointURL, 'POST');
const searchResuls$ = searchEndpoint.response$;
const search = term => searchEndpoint.fetch({term});
const term$ = Rx.Observable
.fromEvent(document.querySelector('#search-input'), 'keyup')
.map(event => event.target.value)
.debounce(250)
.filter(term => term.length > 2)
.do(search);
term$
.flatMap(() => searchResuls$)
.subscribe(displayResults);
function displayResults([term, suggestions, descriptions, links]) {
const $results = $('#search-results').empty();
$nodes = Rx.Observable
.zip(
Rx.Observable.from(suggestions),
Rx.Observable.from(descriptions),
Rx.Observable.from(links),
(sugg, desc, link) => $(`<ul><a href="${link}">${sugg}</a><p>${desc}</p></ul>`)
)
.subscribe($node => $results.append($node))
}