cancelable-request
v1.0.9
Published
Allows you to abort Web requests as and when desired.
Downloads
10
Maintainers
Readme
Cancelable Request
Cancelable request allows us to abort Web requests as and when desired.
Table of contents
Getting Started
These instructions will allow you to use the Cancelable Request library according to your needs.
Installation
To install the library, run:
$ yarn add cancelable-request
Or if you prefer using npm:
$ npm i cancelable-request
Usage
Axios usage
import axios from "axios";
import { cancelableRequest } from "cancelable-request";
const cancelableGetCats = cancelableRequest(async (signal, name: string) => {
const { data } = await axios.get("https://catfact.ninja/fact", {
signal,
params: { name }
});
return data;
});
cancelableGetCats("Miau!");
cancelableGetCats.cancel();
Fetch usage
import { cancelableRequest } from "cancelable-request";
const cancelableGetCats = cancelableRequest(async (signal, name: string) => {
const response = await fetch("https://catfact.ninja/fact", {
signal,
body: name
});
const cats = await response.json();
return cats;
});
cancelableGetCats("Miau!");
cancelableGetCats.cancel();
React usage
import React, { useState, useEffect, FC } from "react";
import { cancelableRequest } from "cancelable-request";
import axios from "axios";
type CatType = {
fact: string;
length: number;
};
const Cats: FC = () => {
const [cats, setCats] = useState<Array<CatType>>([]);
const cancelableGetCats = cancelableRequest(
async (signal, params: { page: number; limit: number }) => {
const { data } = await axios.get<{ data: Array<CatType> }>(
"https://catfact.ninja/facts",
{
signal,
params
}
);
return data.data;
}
);
useEffect(() => {
const fetchCats = async () => {
try {
const catsData = await cancelableGetCats({ page: 10, limit: 10 });
setCats(catsData);
} catch (error) {
console.log(error);
}
};
fetchCats();
return () => {
cancelableGetCats.cancel();
};
}, []);
return (
<ul>
{cats.map((cat, index) => (
<li key={index}>
<p>{cat.fact}</p>
<p>{cat.length}</p>
</li>
))}
</ul>
);
};
export default Cats;