how to cancel/abort ajax request in axios

Axios does not support canceling requests at the moment. Please see this issue for details.

UPDATE: Cancellation support was added in axios v0.15.

EDIT: The axios cancel token API is based on the withdrawn cancelable promises proposal.

Example:

const cancelTokenSource = axios.CancelToken.source();axios.get('/user/12345', {  cancelToken: cancelTokenSource.token});// Cancel requestcancelTokenSource.cancel();

Using useEffect hook:

useEffect(() => {  const ourRequest = Axios.CancelToken.source() // <-- 1st step  const fetchPost = async () => {    try {      const response = await Axios.get(`endpointURL`, {        cancelToken: ourRequest.token, // <-- 2nd step      })      console.log(response.data)      setPost(response.data)      setIsLoading(false)    } catch (err) {      console.log('There was a problem or request was cancelled.')    }  }  fetchPost()  return () => {    ourRequest.cancel() // <-- 3rd step  }}, [])

Note: For POST request, pass cancelToken as 3rd argument

Axios.post(`endpointURL`, {data}, { cancelToken: ourRequest.token, // 2nd step})

import React, { Component } from "react";import axios from "axios";const CancelToken = axios.CancelToken;let cancel;class Abc extends Component {  componentDidMount() {    this.Api();  }  Api() {      // Cancel previous request    if (cancel !== undefined) {      cancel();    }    axios.post(URL, reqBody, {        cancelToken: new CancelToken(function executor(c) {          cancel = c;        }),      })      .then((response) => {        //responce Body      })      .catch((error) => {        if (axios.isCancel(error)) {          console.log("post Request canceled");        }      });  }  render() {    return <h2>cancel Axios Request</h2>;  }}export default Abc;