Package Exports

cancelable-request
cancelable-request/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cancelable-request) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Cancelable Request

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

Cancelable Request

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