Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joselion/rxjs-axios
A complete Axios wrapper that uses RxJS observables instead of promises
https://github.com/joselion/rxjs-axios
ajax axios http observable reactive request rxjs rxjs-observable
Last synced: 17 days ago
JSON representation
A complete Axios wrapper that uses RxJS observables instead of promises
- Host: GitHub
- URL: https://github.com/joselion/rxjs-axios
- Owner: JoseLion
- License: mit
- Created: 2022-11-06T17:32:34.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-23T08:32:32.000Z (5 months ago)
- Last Synced: 2024-10-11T22:48:30.679Z (about 1 month ago)
- Topics: ajax, axios, http, observable, reactive, request, rxjs, rxjs-observable
- Language: TypeScript
- Homepage: https://joselion.github.io/rxjs-axios/
- Size: 4.9 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/JoseLion/rxjs-axios/actions/workflows/ci.yml)
[](https://github.com/JoseLion/rxjs-axios/actions/workflows/codeql.yml)
[](https://github.com/JoseLion/rxjs-axios/actions/workflows/pages.yml)
[](https://github.com/JoseLion/rxjs-axios/actions/workflows/release.yml)
[](https://www.npmjs.com/package/rxjs-axios)
[](https://www.npmjs.com/package/rxjs-axios)
[](https://www.npmjs.com/package/rxjs-axios)
[](https://github.com/JoseLion/rxjs-axios/blob/main/LICENSE)
[](https://github.com/JoseLion/rxjs-axios/releases)
[](https://snyk.io/test/github/JoseLion/rxjs-axios)
# rxjs-axios
A complete Axios wrapper that uses RxJS observables instead of promises. Same Axios API, but anything that used to return a `Promise` will now return an `Observable` instead.
## Overview
Even though there are a few options out there for Axios wrappers converting its promise-based methods to observables, this library offers a few extra features that make it different:
- Based on Axios **v1.0.0** and forward.
- TypeScript first oriented.
- Written 100% in TypeScript; everything has type definitions.
- All Axios types are re-exported, so you can import everything from `rxjs-axios`.
- Methods no longer default their type to `any`. Instead, they default to `unknown`, which not only makes things safer but also forces you to add better types to your code.
- Unsubscribing cancels the request.
- Cancellation happens on the observable teardown logic, with no mutation or workarounds.
- Uses [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) instead of Axios deprecated `CancelToken`.
- Seamless usage; works just like Axios.
- Besides the Observables, you won't feel any difference with Axios API.
- All Axios methods are provided. Other libraries only provide the most commonly used methods (e.g., `get`, `post`, `put`, etc.), while rxjs-axios provide everything available in the Axios instance, like `request(..)`, all form-related methods (e.g., `postForm(..)`, `toFormData(..)`, `formToJSON(..)`, etc.), `isAxiosError(..)`, `defaults`, `interceptors`.
- Fully tested.
- Ensure compatibility around NodeJS, Axios, and RxJS versions.
- Safer upgrades, no unexpected surprises.
## Versions Compatibility
- **NodeJS:** >=16
- **Axios:** >=1.0.0
- **RxJS:** >=5.5.12
## Install
This library has `axios` and `rxjs` as required peer dependencies, so don't forget to add them too.
With NPM:
```
npm i rxjs-axios axios rxjs
```
With Yarn:
```
yarn add rxjs-axios axios rxjs
```
## Usage
You can use `rxjs-axios` the same way as you would do with Axios. The only difference is that request will result in an `Observable>`, so you'll have to subscribe to the observable to get the response. If you're using TypeScript, remember to add a type to the method's generic 😉.
Simple example:
```ts
import { axios } from "rxjs-axios";
import { map } from "rxjs"
axios.get("/api/users")
.pipe(map(({ data }) => data))
.subscribe(users => {
// do anything with users array
});
```
This becomes particularly cleaner on ReactJS, as you can unsubscribe on the `useEffect(..)` clean-up callback:
```tsx
import { ReactElement, useEffect, useState } from "react";
import { axios } from "rxjs-axios";
import { finalize, map } from "rxjs"
function UsersScreen(): ReactElement {
const [pending, setPending] = useState(false);
const [users, setUsers] = useState([]);
useEffect(() => {
setPending(true);
const subscription = axios.get("/api/users")
.pipe(
map(({ data }) => data),
finalize(() => setPending(false)),
)
.subscribe(setUsers);
// The request will be canceled if the component is unmounted and the
// subscription was not yet complete
return () => subscription.unsubscribe();
}, []);
return (
)
}
```
## Something's missing?
Suggestions are always welcome! Please create an [issue](https://github.com/JoseLion/rxjs-axios/issues/new) describing the request, feature, or bug. We'll try to look into it as soon as possible 🙂
## Contributions
Contributions are very welcome! To do so, please fork this repository and open a Pull Request to the `main` branch.
## License
[MIT License](https://github.com/JoseLion/rxjs-axios/blob/main/LICENSE)