https://github.com/cyclejs/cycle-fetch-driver
Cycle.js for the Fetch API
https://github.com/cyclejs/cycle-fetch-driver
Last synced: about 1 year ago
JSON representation
Cycle.js for the Fetch API
- Host: GitHub
- URL: https://github.com/cyclejs/cycle-fetch-driver
- Owner: cyclejs
- Created: 2015-09-22T03:54:07.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2016-02-03T08:50:16.000Z (over 10 years ago)
- Last Synced: 2024-10-30T00:55:12.857Z (over 1 year ago)
- Language: JavaScript
- Size: 19.5 KB
- Stars: 27
- Watchers: 5
- Forks: 6
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cycle Fetch Driver
A [Cycle.js](http://cycle.js.org) [Driver](http://cycle.js.org/drivers.html) for making HTTP requests, using the [Fetch API](https://fetch.spec.whatwg.org/).
## Install
```sh
npm install @cycle/fetch
```
## API
### ```makeFetchDriver(scheduler: Scheduler) -> fetchDriver: function```
Factory that returns a fetch driver. It takes an optional ```scheduler``` argument to pass into ```fromPromise```.
## Usage
Basics:
```js
import 'whatwg-fetch' // polyfill if you want to support older browsers
import Cycle from '@cycle/core';
import { makeFetchDriver } from '@cycle/fetch';
function main(responses) {
// ...
}
const drivers = {
HTTP: makeFetchDriver()
}
Cycle.run(main, drivers);
```
Simple and normal use case:
```js
function main({ DOM, HTTP }) {
const HELLO_URL = 'http://localhost:8080/hello';
const request$ = Rx.Observable.just(HELLO_URL);
const vtree$ = HTTP
.byUrl(HELLO_URL)
.mergeAll()
.flatMap(res => res.text()) // We expect this to be "Hello World"
.startWith('Loading...')
.map(text =>
h('div.container', [
h('h1', text)
])
);
return {
DOM: vtree$,
HTTP: request$
};
}
```
Select all the responses for a certain key:
```js
function main({ DOM, HTTP }) {
const HELLO_URL = 'http://localhost:8080/hello';
const request$ = Rx.Observable.just({
key: 'hello',
url: HELLO_URL
});
const vtree$ = HTTP
.byKey('hello')
.mergeAll()
.flatMap(res => res.text()) // We expect this to be "Hello World"
.startWith('Loading...')
.map(text =>
h('div.container', [
h('h1', text)
])
);
return {
DOM: vtree$,
HTTP: request$
};
}
```