How to use the axios.CancelToken.source function in axios

export const TaxonomyTermsItem = ( {
	taxonomy,
	value,
	onChange,
} ) => {
	const [ data, setData ] = useState( {
		terms: [],
		idsBySlug: {},
		slugsById: {}
	} )
	const { taxonomies } = getSystemConfig()
	const wpRest = getWpRest()
	const source = CancelToken.source()

	useEffect( () => {
		wpRest.terms().hierarchical( {
			taxonomy,
			hide_empty: 0,
			orderby: 'name',
			order: 'ASC',
		}, {
			cancelToken: source.token,
		} ).then( response => {
			data.terms = response.data
			flattenResponseData( response.data, data )
			setData( { ...data } )
		} ).catch( ( error ) => {
			if ( ! isCancel( error ) ) {
				console.log( error ) // eslint-disable-line no-console

export const WordPress = ( {
	type = 'posts',
	getItemProps = ( item, defaultProps ) => defaultProps,
	formatItems = items => items,
	onItemsLoaded = () => {},
	query = {},
	paginate = true,
	...rest
} ) => {
	
	const [ hasMoreItems, setHasMoreItems ] = useState( true )
	const { items, setItems, updateItem, removeItem, cloneItem } = List.useListItems()
	const { getPagedContent } = getWpRest()
	const source = CancelToken.source()

	const itemProps = ( item, defaultProps ) => {
		return getItemProps( item, {
			...defaultProps,
			removeItem,
			cloneItem,
			updateItem,
		} )
	}

	const loadItems = ( loadingComplete ) => {
		getPagedContent( type, query, items.length, {
			cancelToken: source.token,
		} ).then( response  => {
			setItems( items.concat( response.data.items ) )
			setHasMoreItems( loadingComplete ? response.data.has_more : false )

handleGetAreas = () => {
    const { getAreas } = this.props;
    this.cancelAreasFetch();
    this.areasFetch = CancelToken.source();

    getAreas(this.areasFetch.token);
  };

_request = text => {
    this._abortRequest();
    if (text.length >= 3) {
      this.source = CancelToken.source();
      axios.get(AUTOCOMPLETE_URL, {
        cancelToken: this.source.token,
        params: {
          input: text,
          key: this.props.apiKey,
          language: this.props.language,
          components: this.props.components.join('|'),
        },
      })
        .then(({ data }) => {
          let { predictions } = data;
          this.setState({ predictions });
        });
    } else {
      this.setState({ predictions: [] });
    }

addFileInfo(state, file) {
        let fi = {
            file,
            progress: 0,
            start: 0,
            _cancelTokenSource: CancelToken.source()
        }
        fi.cancel = msg => {
            fi._cancelTokenSource.cancel(msg)
        }
        state.fileInfos.push(fi)
    },
    resetFileInfos(state) {

    creator: q => ({ q, cancelTokenSource: CancelToken.source() }),
    reducer: (state, { payload: { cancelTokenSource } }) => ({

handleGetAdminGeodescriber = () => {
    const { getAdminGeodescriber } = this.props;
    this.cancelAdminGeodescriberFetch();
    this.adminGeodescriberFetch = CancelToken.source();

    getAdminGeodescriber({
      ...location,
      token: this.adminGeodescriberFetch.token
    });
  };

static getSource() {
    return CancelToken.source()
  }
}

export const Main = ( { match } ) => {
	const { searchHistory } = useSystemState()
	const { setSearchHistory } = getSystemActions()
	const { keyword } = useAppState( 'fl-search' )
	const { setKeyword } = getAppActions( 'fl-search' )
	const [ loading, setLoading ] = useState( false )
	const [ results, setResults ] = useState( null )
	const { config, routes } = getRequestConfig( { keyword } )
	const wp = getWpRest()
	let source = CancelToken.source()

	useEffect( () => {
		source.cancel()
		source = CancelToken.source()
		setLoading( true )
		setResults( null )

		wp.search( keyword, routes, {
			cancelToken: source.token,
		} ).then( response => {
			const results = []

			response.data.map( ( result, key ) => {
				const { label, format } = config[ key ]
				if ( ! result.items || ! result.items.length ) {
					return

export function fetchWithCancel(url) {
  const source = CancelToken.source();

  const fetchPromise = () =>
    axios.get(url, {
      cancelToken: source.token
    });

  return { fetchPromise, source, isCancel: axios.isCancel };
}