项目作者: AXeL-dev

项目描述 :
A handy react hook to cancel axios requests
高级语言: TypeScript
项目地址: git://github.com/AXeL-dev/react-use-cancel-token.git
创建时间: 2021-06-19T00:05:00Z
项目社区:https://github.com/AXeL-dev/react-use-cancel-token

开源协议:

下载


useCancelToken

NPM
Downloads
JavaScript Style Guide

A handy react hook to cancel axios requests

Demo

Install

  1. npm install --save react-use-cancel-token

Usage

useAbortController

  1. import * as React from 'react';
  2. import axios from 'axios';
  3. import useAbortController from 'react-use-cancel-token';
  4. const Example = () => {
  5. const { newAbortSignal, cancelPreviousRequest, isCancel } = useAbortController();
  6. const handleClick = async () => {
  7. cancelPreviousRequest();
  8. try {
  9. const response = await axios.get('request_url', {
  10. signal: newAbortSignal(),
  11. });
  12. if (response.status === 200) {
  13. // handle success
  14. }
  15. } catch (err) {
  16. if (isCancel(err)) return;
  17. console.error(err);
  18. }
  19. };
  20. return <button onClick={handleClick}>send request</button>;
  21. };

Outputs

Property Type Description
controller MutableObjectRef Reference to the AbortController instance
newAbortSignal () => AbortSignal Generate the abort signal sent in the Axios request
cancelPreviousRequest () => void Cancel any previous Axios request
isCancel () => boolean Check if the error returned in Axios response is an abort error

useCancelToken (deprecated)

  1. import * as React from 'react';
  2. import axios from 'axios';
  3. import { useCancelToken } from 'react-use-cancel-token';
  4. const Example = () => {
  5. const { newCancelToken, cancelPreviousRequest, isCancel } = useCancelToken();
  6. const handleClick = async () => {
  7. cancelPreviousRequest();
  8. try {
  9. const response = await axios.get('request_url', {
  10. cancelToken: newCancelToken(),
  11. });
  12. if (response.status === 200) {
  13. // handle success
  14. }
  15. } catch (err) {
  16. if (isCancel(err)) return;
  17. console.error(err);
  18. }
  19. };
  20. return <button onClick={handleClick}>send request</button>;
  21. };

Outputs

Property Type Description
source MutableObjectRef Reference to Axios cancel token source
newCancelToken () => CancelToken Generate the cancel token sent in the Axios request
cancelPreviousRequest (message?: string) => void Cancel any previous Axios request
isCancel () => boolean Check if the error returned in Axios response is a cancel token error

License

MIT © AXeL-dev