Abort Controllers In Axios

Abort Controller In Axios

import React, { Component } from 'react';
import axios from 'axios';

class Example extends Component {
  signal = axios.CancelToken.source();

  state = {
    isLoading: false,
    user: {},
  }
  
  componentDidMount() {
    this.onLoadUser();
  }
  
  componentWillUnmount() {
    this.signal.cancel('Api is being canceled');
  }
  
  onLoadUser = async () => {
    try {
      this.setState({ isLoading: true });
      const response = await axios.get('https://randomuser.me/api/', {
        cancelToken: this.signal.token,
      })
      this.setState({ user: response.data, isLoading: true });
    } catch (err) {
      if (axios.isCancel(err)) {
        console.log('Error: ', err.message); // => prints: Api is being canceled
      } else {
        this.setState({ isLoading: false });
      }
    }
   } 
   
    
    render() {
      return (
        <div>
          <pre>{JSON.stringify(this.state.user, null, 2)}</pre>
        </div>
      )
    }
 
}

Thanks man, helped me just as i needed it.

If you want more in-depth knowledge of Abort Controllers, I wrote this article which might help you as well https://medium.com/free-code-camp/how-to-work-with-react-the-right-way-to-avoid-some-common-pitfalls-fc9eb5e34d9e
Cheers =)

Line 44 is extra inside the script and need to be removed.

@maxpaynestory good catch 👍 fixed it.

Have you done this but with redux? I mean, the axios call in an action creator, but still the cancellation from the component

Can be done, the principals are the same for AbortController

Since https://github.com/axios/axios#cancellation cancel token API proposal was withdrawn will this still work ?

Since https://github.com/axios/axios#cancellation cancel token API proposal was withdrawn will this still work ?

The concept of Abort Controller still works :))

Any snippet on how to use it with Hooks (useEffect) ?
Does it works fine in the cleanup function of useEffect?

@saksham-tj have a look at this stackoverflow thread https://stackoverflow.com/a/61056569/4921319

Here is another amazing article by @kentcdodds on abort controllers usage in functional components i.e, hooks https://epicreact.dev/myths-about-useeffect/