Giter VIP home page Giter VIP logo

rxios's Introduction

Rxios

A RxJS wrapper for axios

npm CI bundlephobia

Rxios makes the awesome axios library reactive, so that it's responses are returned as RxJS observables.

Observables? Why?

Regular promises are cool, especially for HTTP requests in async/await functions.

However, Observables provide operators like map, forEach, reduce... There are also powerful operators like retry() or replay(), that are often quite handy.

Observables also excel when we need to perform some kind of manipulation on the received data, or when we need to chain several requests.

Lastly, Reactive stuff is what all the cool kids are doing.

Installation

npm install axios rxjs rxios

Usage

You can use Rxios by either

instantiating the class yourself

import { Rxios } from 'rxios';
const rxios = new Rxios({ /* options here */ })
const request = rxios.get(url)...

importing a "ready-to-use" generic instance

import { rxios } from 'rxios';
const request = rxios.get(url)...

In any case, please keep in mind that, when importing, Rxios refers to the class and rxios to the instance.

Syntax details

const { Rxios } = require('rxios');
// or import { Rxios } from 'rxios';

const http = new Rxios({
  // all regular axios request configuration options are valid here
  // check https://github.com/axios/axios#request-config
  baseURL: 'https://jsonplaceholder.typicode.com',
});

// plain GET request
http.get('/posts').subscribe(
  response => {
    console.log(response); // no need to 'response.data'
  },
  err => {
    console.error(err);
  }
);

// GET request with query params
http
  .get('/posts', { userId: 1 }) // you can pass an object as second param to the get() method
  .subscribe(
    response => {
      console.log(response); // no need to 'response.data'
    },
    err => {
      console.error(err);
    }
  );

// POST request
http
  .post('/posts', {
    // this object will be the payload of the request
    userId: 1,
    id: 1,
    title:
      'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
  })
  .subscribe(
    response => {
      console.log(response); // again, no need to 'response.data'
    },
    err => {
      console.error(err);
    }
  );

TypeScript usage

Rxios is written in TypeScript, and its typings are provided in this same package.

Also, just like with axios or with Angular's Http module, response types are accepted by the method, like:

import { Rxios } from 'rxios';
const http = new Rxios();
interface MyResponse = {userId: number; id: number; title: string};
http.get<MyResponse[]>('/posts/1')
  .subscribe(resp: MyResponse[] => {...});

Advanced usage

All Rxios methods always return an Observable, to which we can apply advanced RxJS operations.

For example, we could make two simultaneous requests and merge their responses as they come, without needing to wait for both to be completed.

import { Observable } from 'rxjs/Rx';
import { Rxios } from 'rxios';
const http = new Rxios();

const firstReq = http.get('/posts/1');
const secondReq = http.get('/posts/2');
firstReq.merge(secondReq).subscribe(...);

rxios's People

Contributors

davguij avatar dependabot[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

rxios's Issues

Support for request cancellation

Hello!

Thank you for this great library!

One of the greatest things about RxJS observables is that they are cancellable, this is especially important when it comes to network requests. So you will definitely want to terminate the pending network request, when it's result is no longer needed by the application (see switchMap). By briefly looking at the code I can't see the logic related to request cancelling, however, axios supports this. I would suggest to implement this critical feature.


axios-observable also has this feature.

Documentation examples don't work

import { rxios } from 'rxios';

const http = new rxios({
  // all regular axios request configuration options are valid here
  // check https://github.com/axios/axios#request-config
  baseUrl: 'https://jsonplaceholder.typicode.com',
});

returns:

A constructor name should not start with a lowercase letter

Playing with capitals gives us:

import { Rxios } from 'rxios';

const http = new Rxios({
  // all regular axios request configuration options are valid here
  // check https://github.com/axios/axios#request-config
  baseUrl: 'https://jsonplaceholder.typicode.com',
});

returns

Rxios is not a constructor

ERROR Failed to compile: dependency was not found

ERROR  Failed to compile with 1 errors                                                                                                                                                                         06:45:15

This dependency was not found:

* rxjs-compat/Observable in ./node_modules/rxjs/Observable.js

To install it, you can run: npm install --save rxjs-compat/Observable

I checked this directory: ./node_modules/rxjs/ and file Observable.js is there. Suggested fix option to install rxjs-compat/Observable not working.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.