how to cancel abort ajax request in axios

Question

I use axios for ajax requests and reactJS   flux for render UI  In my app there is third side timeline  reactJS component   Timeline can be managed by mouse s scroll  App sends ajax request for the actual data after any scroll event  Problem that processing of request at server can be more slow than next scroll event  In this case app can have several  2-3 usually  requests that already is deprecated because user scrolls further  it is a problem because every time at receiving of new data timeline begins redraw   Because it s reactJS   flux  Because of this  the user sees the movement of the timeline back and forth several times  The easiest way to solve this problem  it just abort previous ajax request as in jQuery  For example         document  ready      var xhr       var fn   function            if xhr  amp  amp  xhr readyState    4               xhr abort                      xhr     ajax               url   ajax progress ftl               success  function data                      do something                                       var interval   setInterval fn  500        How to cancel abort requests in axios

User · Answer

https   github com axios axios cancellation  const CancelToken   axios CancelToken                  const source   CancelToken source                    let url    www url com                    axios get url                        progress  false                      cancelToken  source token                                         then resp   gt                             alert  done                                            setTimeout      gt                        source cancel  Operation canceled by the user                        1000

User · Answer

Using cp-axios wrapper you able to abort your requests with three diffent types of the cancellation API  1  Promise cancallation API  CPromise   Live browser example  const cpAxios  require  cp-axios     const url   https   run mocky io v3 753aa609-65ae-4109-8f83-9cfe365290f0 mocky-delay 5s      const chain   cpAxios url         timeout 5000         then response  gt              console log  Done    JSON stringify response data              err   gt              console warn  Request failed    err                 setTimeout      gt        chain cancel        500    2  Using AbortController signal API   const cpAxios  require  cp-axios     const CPromise  require  c-promise2     const url   https   run mocky io v3 753aa609-65ae-4109-8f83-9cfe365290f0 mocky-delay 5s      const abortController   new CPromise AbortController     const  signal    abortController     const chain   cpAxios url   signal          timeout 5000         then response  gt              console log  Done    JSON stringify response data              err   gt              console warn  Request failed    err                 setTimeout      gt        abortController abort        500    3  Using a plain axios cancelToken   const cpAxios  require  cp-axios     const url   https   run mocky io v3 753aa609-65ae-4109-8f83-9cfe365290f0 mocky-delay 5s     const source   cpAxios CancelToken source       cpAxios url   cancelToken  source token          timeout 5000         then response  gt              console log  Done    JSON stringify response data              err   gt              console warn  Request failed    err                 setTimeout      gt        source cancel        500

User · Answer

Using useEffect hook  useEffect      gt      const ourRequest   Axios CancelToken source       lt -- 1st step    const fetchPost   async      gt        try         const response   await Axios get  endpointURL             cancelToken  ourRequest token      lt -- 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      gt        ourRequest cancel       lt -- 3rd step             Note  For POST request  pass cancelToken as 3rd argument Axios post  endpointURL    data      cancelToken  ourRequest token     2nd step

User · Answer

There is really nice package with few examples of usage called axios-cancel  I ve found it very helpful  Here is the link  https   www npmjs com package axios-cancel

User · Answer

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    gt              responce Body                 catch  error    gt            if  axios isCancel error               console log  post Request canceled                               render         return  lt h2 gt cancel Axios Request lt  h2 gt          export default Abc

User · Answer

Typically you want to cancel the previous ajax request and ignore it s coming response  only when a new ajax request of that instance is started  for this purpose  do the following  Example  getting some comments from API     declare an ajax request s cancelToken  globally  let ajaxRequest   null    function getComments             cancel  previous ajax if exists     if  ajaxRequest             ajaxRequest cancel                   creates a new token for upcomming ajax  overwrite the previous one      ajaxRequest   axios CancelToken source           return axios get   api get-comments     cancelToken  ajaxRequest token    then  response    gt            console log response data         catch function err            if  axios isCancel err                console log  Previous request canceled  new request is send   err message             else                     handle error

User · Answer

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 request cancelTokenSource cancel

User · Answer

This is how I did it using promises in node  Pollings stop after making the first request     var axios   require  axios        var CancelToken   axios CancelToken      var cancel      axios get  www url com                                                   cancelToken  new CancelToken                              function executor c                                    cancel   c                                                                        then  response    gt                               cancel

[reactjs] how to cancel/abort ajax request in axios

Examples related to reactjs

Examples related to flux

Examples related to reactjs-flux

Examples related to es6-promise

Examples related to axios