‚̧Numerous Pancakes Munched

    xhfetch
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2¬†‚Äʬ†Public¬†‚Äʬ†Published

    xhfetch

    npm gzip size Coverage Status

    Tiny cancellable fetch

    • Tiny: about 600 bytes of ES3 gzipped
    • Familiar: uses common fetch and XMLHttpRequest api
    • Supported: supports IE8+ (assuming Promise is polyfilled)

    Installation

    npm install xhfetch

    Usage

    No Cancellation

    import { createRequest } from 'xhfetch';
     
    // createRequest accepts same parameter as window.fetch
    createRequest('https://api.github.com/users', {
        headers: {
            'Accept': 'application/json',
        },
    })
      .fetch() // the api request will only be invoked when you call `fetch`
      .then(res => res.json());
      .then(users => console.log(users))

    With Cancellation

    import { createRequest } from 'xhfetch';
     
    const { xhr, fetch } = createRequest('https://api.github.com/users', {
        headers: {
            'Accept': 'application/json',
        },
    })
     
    fetch()
      .then(res => res.json());
      .then(users => console.log(users))
     
    setTimeout(() => {
        // cancels if the request takes more than a second
        xhr.abort();
    }, 1000)

    Examples

    API

    The goal of Xhfetch is to provide a familiar interface while keeping small size, therefore we only focus on a subset of fetch API that is most commonly used.

    createRequest(url: string, options: Object) => { fetch, xhr }

    Specify a request that you want to make and get a fetch function and a XMLHttpRequest object. The following properties in options will be accounted:

    • method
    • headers
    • credentials: Accepts a "include" string, which will allow both CORS and same origin requests to work with cookies. Xhfetch won't send or receive cookies otherwise. The "same-origin" value is not supported (just don't set it if it's same-origin).
    • body: The content to be transmitted in request's body. Common content types include FormData, JSON, Blob, ArrayBuffer or plain text.

    .fetch()

    The fetch function returns by createRequest does not accepts any parameter. Invoking this call will kicks off the API request and returns a response object in the Promise chain. The response object contains a subset of Response class functionality:

    • response.ok
    • response.status
    • response.statusText
    • response.clone()
    • response.text(), response.json(), response.blob()
    • response.headers

    .xhr

    The xhr object returns by createRequest is the underlying XMLHttpRequest object that is making the request, therefore you have access to all methods available for XMLHttpRequest, e.g. .abort() and .addEventListener()

    License

    MIT

    Acknowledgements

    • The code of xhfetch is based on unfetch.

    Install

    npm i xhfetch

    DownloadsWeekly Downloads

    2

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    39.2 kB

    Total Files

    17

    Last publish

    Collaborators

    • malcolmkee