Skip to content

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

Notifications You must be signed in to change notification settings

luisrj1495/cancelable-request

Repository files navigation

npm version TypeScript npm downloads

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;

License

MIT License

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published