title: How do I cancel all pending Axios requests in React Native?
body: <p>My React Native app uses axios to connect to a backend.  This is done in the file myApi.js:</p>
  <pre><code>class client {
    axiosClient = axios.create({
      baseURL: example.com,
    });
  
    async get(url, data, config) {
      return this.axiosClient.get(url, data, config);
    }
  
    async put(url, data, config) {
      return this.axiosClient.put(url, data, config);
    }
  
    async post(url, data, config) {
      return this.axiosClient.post(url, data, config);
    }
  }
  
  export default new client();
  </code></pre>
  <p>I have a component which contains a useEffect which is controlled by a date picker. The selected date is held in a context called DateContext.  When the selected date changes, a request is fired off to get some data for that date.  When data is returned, it is displayed to the user.</p>
  <p>The Component is:</p>
  <pre><code>const DaySelect = () =&gt; {
    const {dateState} = useContext(DateContext);
  
    useEffect(() =&gt; {
      const load = () =&gt; {
  
        const url = '/getDataForDate';
  
        const req = {
          selectedDate: moment(dateState.currentDate).format(
            'YYYY-MM-DD',
          ),
        };
  
        myApi
          .post(url, req)
          .then((res) =&gt; {
            // Now put results into state so they will be displayed
          })
      };
  
      load();
  
    }, [dateState.currentDate]);
  
    return (
      &lt;View&gt;
          &lt;&gt;
            &lt;Text&gt;Please select a date.&lt;/Text&gt;
            &lt;DateSelector /&gt;
            &lt;Results /&gt;
          &lt;/&gt;
        )}
      &lt;/View&gt;
    );
  };
  
  export default DaySelect;
  </code></pre>
  <p><code>DateSelector</code> is just the Component where the date is selected; any change to the date updates the value of dateState.currentDate.  <code>Results</code> displays the data.</p>
  <p>This works fine as long as the user clicks a date, and waits for the results to show before clicking a new date. However, if they click several times, then a request is fired off each time and the resulting data is displayed as each request completes.  Since the requests don't finish in the order that they start, this often results in the wrong data being shown.</p>
  <p>To avoid this, I believe I need to cancel any existing requests before making a new request.  I've tried to do this using Abort Controller, but it doesn't seem to do anything.</p>
  <p>I added the following to <code>myApi.js</code>:</p>
  <pre><code>const controller = new AbortController();
  
  class client {
    axiosClient = axios.create({
      baseURL: example.com,
    });
  
    async get(url, data, config) {
      return this.axiosClient.get(url, data, config);
    }
  
    async put(url, data, config) {
      return this.axiosClient.put(url, data, config);
    }
  
    async post(url, data, config) {
      return this.axiosClient.post(url, data, config, {signal: controller.signal});
    }
  
    async cancel() {
       controller.abort();
    }
  }
  
  export default new client();
  </code></pre>
  <p>Then in my main component I do</p>
  <pre><code>myApi.cancel()
  </code></pre>
  <p>before making the new request.</p>
  <p>This doesn't seem to do anything, though - the requests don't get cancelled.  What am I doing wrong here?</p>
  <p>EDIT: Following Ibrahim's suggestion below, I changed the api file to:</p>
  <pre><code>const cancelTokenSource = axios.CancelToken.source();
  
  class client {
    axiosClient = axios.create({
      baseURL: example.com,
    });
  
    async post(url, data, config) {
      const newConfig = {
         ...config,
         cancelToken: cancelTokenSource.token
      };
      return this.axiosClient.post(url, data, newConfig);
    }
  
    async cancel() { // Tried this with and without async
       cancelTokenSource.cancel();
    }
  }
  
  export default new client();
  </code></pre>
  <p>This makes the api call fail entirely.</p>