Cancelable Request
Cancelable request allows us to abort Web requests as and when desired.
Table of contents
- Table of contents - Getting Started - Installation - Usage- [Axios usage](#axios-usage)
- [Fetch usage](#fetch-usage)
- [React usage](#react-usage)
- LicenseGetting 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;