Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including radi-fetch with all npm packages installed. Try it out:

var radiFetch = require("radi-fetch")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

radi-fetch v0.3.23

radi-fetch

radi-fetch is the official HTTP client for Radi.js. It deeply integrates with Radi for seamless application building.

npm version npm downloads gzip bundle size radi workspace on slack

Installation

To install the stable version:

npm install --save radi-fetch

This assumes you are using npm as your package manager.

If you're not, you can access these files on unpkg, download them, or point your package manager to them.

Browser Compatibility

radi-fetch currently is compatible with browsers that support ES5.

Getting started

Here is how it works. We start by initiating plugin for Radi Radi.plugin(/* radi-fetch */, /* config */). Config here is optional, but we can define crucial parts of http client.

import RadiFetch from 'radi-fetch'

Radi.plugin(RadiFetch)

or

import RadiFetch from 'radi-fetch'

Radi.plugin(RadiFetch, {
  /* We can define base url */
  baseUrl: 'https://example.com',

  /* We can define headers */
  headers: {
    'Authorization': 'key',
  },

  /* We can define dummy data that will be returned for requests made with radi-fetch */
  dummy: true,           // Should return dummy data or use real requests
  dummyTimeout: 1000,    // Dummy data latency simulation
  dummyData: {           // Actual dummy data
    get: {
      '/api': {
        hello: 'world',
      },
    },
  },
});

That's it, we're ready to go. We can start fetching our api or whatever we want by using fetch by $fetch[type](url, params, headers) handle. Response can be automatically parsed as JSON by using .json() method, or .text() for plain text response.

class MyComponent extends Radi.Component {
  on() {
    return {
      mount() {
        this.$fetch.get('/test')
          .then(response => {
            console.log(response.json())
          })
          .catch(error => {
            console.log('Got some', error)
          })
      }
    }
  }
}

Fetch automatically sets loading state for any ongoing request. We can listen to them in radi using $loading handle.

/* @jsx Radi.r */

class MyComponent extends Radi.Component {
  view() {
    return (
      <ul>
        <li>/api is { this.$loading.state['/api'] ? 'loading' : 'ready' }</li>
        <li>Number of active requests: { this.$loading.state.$count }</li>
        <li>Anything loading: { this.$loading.state.$any }</li>
      </ul>
    )
  }
}

Stay In Touch

License

MIT

Copyright (c) 2018-present, Marcis (Marcisbee) Bergmanis

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free