RxxFetch

Observable HTTP Fetch() wrapped by RxJS6, support browser and Node.js

![GitHub tag]()
![]()

Features

- Reactive Ajax programming
- Request Cancelable via AbortController
- Runs in browsers and Node.js (node-fetch polyfill though)
- Restful API GET POST PUT DELETE via get() post() put() remove()
- Retrieve and append cookies during 30x redirect on Node.js (via keepRedirectCookies:true)
- Apis support Generics, eg. get(url).subscribe(txt => console.info(txt.slice(1)))
- Send file via FormData or Stream on Node.js

Browser support (v2.x)

!Build Status

- Should work fine without polyfills in every modern browser
- IE11 needs polyfills whatwg-fetch, es6-shim, es7-shim
- Edge14 has 1 failure on remove() with form data
- Safari 11 (Mac OS X/iOS) may get failure on abortController.abort()
with TypeError: Origin http://localhost:9876 is not allowed by Access-Control-Allow-Origin
- Mobile Safari 10.0.0 (iOS 10.3.0) may get failure on abortController.abort()
with TypeError: Type error
- Mobile Safari 9.0.0 (iOS 9.3.0) may get failure on redirect
with AssertionError: TypeError: Network request failed
- Android 4.4 will get failure on parseResponseType()
with TypeError: Object function ArrayBuffer() { [native code] } has no method 'isView'

Installing

``bash
npm install rxxfetch
`

Usage

$3

`ts
import { get } from 'rxxfetch'

const url = 'https://httpbin.org/get'

get(url, args).subscribe(
json => {
console.log(json.url)
},
console.error,
)

/* GET Response Interface of httpbin.org /
export interface HttpbinGetResponse {
args: any
headers: {
Accept: string
Connection: string
Host: string
'User-Agent': string,
}
origin: string // ip
url: string
}
`

$3

`ts
import { get, RxRequestInit } from 'rxxfetch'

const url = 'https://httpbin.org/get'
const args: RxRequestInit = {
dataType: 'text'
}

get(url, args).subscribe(
txt => {
console.log(txt.slice(0, 10))
},
console.error,
)
`

$3

#### JSON
`ts
import { post, RxRequestInit } from 'rxxfetch'

const url = 'https://httpbin.org/post'
const pdata = {
cn: '测试',
p1: Math.random(),
p2: Math.random().toString(),
p3: {
foo: Math.random() + '',
},
}
const args: RxRequestInit = {}
args.data = { ...pdata }

const res = await post(url, args).toPromise()
assert(res && res.url === url)

const json: typeof pdata = res.json
assert(json.cn === pdata.cn, Should got "${pdata.cn}")
assert(json.p1 === pdata.p1, Should got "${pdata.p1}")
assert(json.p2 === pdata.p2, Should got "${pdata.p2}")
assert(json.p3.foo === pdata.p3.foo, Should got "${pdata.p3.foo}")
`

#### FORM
`ts
import { post, RxRequestInit, ContentTypeList } from 'rxxfetch'

const url = 'https://httpbin.org/post'
const pdata = {
p1: Math.random(),
p2: Math.random().toString(),
}
const args: RxRequestInit = {
// default value is ContentTypeList.json
contentType: ContentTypeList.formUrlencoded,
data: pdata
}

post(url, args).subscribe(
res => {
const form = res.form
assert(form && form.p1 === pdata.p1.toString(), Should got "${pdata.p1}")
assert(form && form.p2 === pdata.p2, Should got "${pdata.p2}")
},
)

/* POST Response Interface of httpbin.org /
export interface HttpbinPostResponse extends HttpbinGetResponse {
data: string
files: any
form: any
json: any
}
`

$3

$3

- Handle cookies when 302/303/307 redirect on Node.js, CODE

`ts
const args = {
keepRedirectCookies: true, // <---- intercept redirect -->
}
`

- Cancel an request via AbortController, details in CODE
- POST FILE
- via FormData, goto CODE
- via Stream, goto CODE

Demos

- Browser
- Node.js

Packages

| Package | Version | Dependencies | DevDependencies |
| ------------- | ------------------------------ | ------------------------------------ | -------------------------------------- |
| [rxxfetch] | [![rxxfetch-svg]][rxxfetch-ch] | [![rxxfetch-d-svg]][rxxfetch-d-link] | [![rxxfetch-dd-svg]][rxxfetch-dd-link] |
| [egg-fetch] | [![egg-svg]][egg-ch] | [![egg-d-svg]][egg-d-link] | [![egg-dd-svg]][egg-dd-link] |

License

MIT

$3

- English
- 中文


[rxxfetch]: https://github.com/waitingsong/rxxfetch/tree/master/packages/rxxfetch
[rxxfetch-svg]: https://img.shields.io/npm/v/rxxfetch.svg?maxAge=86400
[rxxfetch-ch]: https://github.com/waitingsong/rxxfetch/tree/master/packages/rxxfetch/CHANGELOG.md
[rxxfetch-d-svg]: https://david-dm.org/waitingsong/rxxfetch.svg?path=packages/rxxfetch
[rxxfetch-d-link]: https://david-dm.org/waitingsong/rxxfetch.svg?path=packages/rxxfetch
[rxxfetch-dd-svg]: https://david-dm.org/waitingsong/rxxfetch/dev-status.svg?path=packages/rxxfetch
[rxxfetch-dd-link]: https://david-dm.org/waitingsong/rxxfetch?path=packages/rxxfetch#info=devDependencies

[egg-fetch`]: https://github.com/waitingsong/rxxfetch/tree/master/packages/egg-fetch
[egg-svg]: https://img.shields.io/npm/v/@waiting/egg-fetch.svg?maxAge=86400
[egg-ch]: https://github.com/waitingsong/rxxfetch/tree/master/packages/egg-fetch/CHANGELOG.md
[egg-d-svg]: https://david-dm.org/waitingsong/rxxfetch.svg?path=packages/egg-fetch
[egg-d-link]: https://david-dm.org/waitingsong/rxxfetch.svg?path=packages/egg-fetch
[egg-dd-svg]: https://david-dm.org/waitingsong/rxxfetch/dev-status.svg?path=packages/egg-fetch
[egg-dd-link]: https://david-dm.org/waitingsong/rxxfetch?path=packages/egg-fetch#info=devDependencies