Cancelable Request

Cancelable request allows us to abort Web requests as and when desired.

Table of contents

• Cancelable Request
  • Table of contents
  • Getting Started
  • Installation
  • Usage
    • Axios usage
    • Fetch usage
    • React usage
  • License

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;

License

MIT License