Observable HTTP fetch API for browser and Node.js. Handle 302/303 redirect correctly on Node.js
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.config
.githooks
.vscode
assets
src
test
test_browser
.editorconfig
.eslintignore
.eslintrc.json
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
README.zh-CN.md
appveyor.yml
package.json
rollup.config.js
tsconfig.cjs.json
tsconfig.json
tslint.json

README.md

RxxFetch

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

Version License Build Status Build status Coverage Status

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<string>(url).subscribe(txt => console.info(txt.slice(1)))
  • Send file via FormData or Stream on Node.js

Browser support

Build Status [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

npm install rxxfetch

Usage

GET JSON

import { get, JsonType } from 'rxxfetch'

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

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

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

GET HTML

import { get, RxRequestInit } from 'rxxfetch'

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

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

POST

import { post, RxRequestInit } from 'rxxfetch'

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

post<HttpbinPostResponse>(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
}

PUT REMOVE goto TEST

On Node.js

  • Needs some polylfill, details in TEST

    import nodefetch, { Headers } from 'node-fetch'
    
    const args = <RxRequestInit> {
      fetchModule: nodefetch,
      headersInitClass: Headers,
    }
  • Handle cookies when 302/303/307 redirect on Node.js, CODE

    import nodefetch, { Headers } from 'node-fetch'
    
    const args = <RxRequestInit> {
      fetchModule: nodefetch,
      headersInitClass: Headers,
      keepRedirectCookies: true,  // <---- intercept redirect
    }
  • Cancel an request via AbortController, details in CODE

    import { abortableFetch, AbortController } from 'abortcontroller-polyfill/dist/cjs-ponyfill.js'
    import nodefetch, { Headers } from 'node-fetch'
    
    const { fetch } = abortableFetch(nodefetch) // <-- polyfilling fetch
    const args = <RxRequestInit> {
      fetchModule: fetch,
      headersInitClass: Headers,
    }
  • POST FILE

    • via FormData, goto CODE
    • via Stream, goto CODE

Demos

License

MIT

Languages