Aborting OLD API Fetch request REACT

Question

In my application, There is a textbox, if the user enters any location then the application searches for that location and creates 5 fetch API request with 5 seconds of interval

if requestId :100 then requests will be ==> 
1. API/GetResult?rv=0.5936085871062164 &  jsonBodyHotel :100      //this is completed
2. API/GetResult?rv=0.5936085871062165 &  jsonBodyHotel :100      //this is completed
3. API/GetResult?rv=0.5936085871062166 &  jsonBodyHotel :100      //this is pending 
4. API/GetResult?rv=0.5936085871062167 &  jsonBodyHotel :100      //this is pending 
5. API/GetResult?rv=0.5936085871062168 &  jsonBodyHotel :100      //this is pending 


Now before completeting those 5 request,if user enters new location ,then again application create 5 fetch API request
for new requestId :101
1. API/GetResult?rv=0.5936085871062174 &  jsonBodyHotel :101     
2. API/GetResult?rv=0.5936085871062175 &  jsonBodyHotel :101     
3. API/GetResult?rv=0.5936085871062176 &  jsonBodyHotel :101     
4. API/GetResult?rv=0.5936085871062177 &  jsonBodyHotel :101     
5. API/GetResult?rv=0.5936085871062178 &  jsonBodyHotel :101     

Once the above process starts ,we need to abort all API with old requestId,
here for an instance ,
3. API/GetResult?rv=0.5936085871062166 &  jsonBodyHotel :100      //this needs to be aborted 
4. API/GetResult?rv=0.5936085871062167 &  jsonBodyHotel :100      //this needs to be aborted      
5. API/GetResult?rv=0.5936085871062168 &  jsonBodyHotel :100      //this needs to be aborted 

and so on for every new request .......

What I have created as follow and I am not getting any error in the console but not able to abort old request as well

import AbortController from "abort-controller"

class ClassContainer extends React.Component {
    constructor(props) {
        super(props);
        this.controller = new AbortController();
        this.signal = this.controller.signal;
    }
    
    


//  Below is the function gets executed whenevr user enter any new location , show loading indictaor and creates 5 fetch API request
searchTravel=()=>{
 this.controller.abort();
 //show loader 
 //API hit to get new requestId
 this.getData(requestId)
}



//  This is a function which will create 5 fetch API request for every requestId==>
getData=(requestId)=>{
jsonBodyHotel : will have requestId & other stuff 

  const response = fetch("/API/GetResult" + "?rv=" + Math.random(), {
          method: "POST",
      body: jsonBodyHotel,
      headers: {
        "Content-type": "application/json; charset=UTF-8",
      },
    },this.signal)
}

How can I abort the old requests , every time a new request is generated

Answer 1

There is one issue why it is not working. You need to create new AbortController for every new request that you create to your backend server.

import AbortController from "abort-controller"

class ClassContainer extends React.Component {
    constructor(props) {
        super(props);
    }
    
    


//  Below is the function gets executed whenevr user enter any new location , show loading indictaor and creates 5 fetch API request
searchTravel=()=>{
 if (this.state.controller) {
       this.state.controller.abort();
 }
 
const controller = new AbortController();
const signal = controller.signal;

this.setState({
  controller: controller,
  signal: signal
})

 //show loader 
 //API hit to get new requestId
 this.getData(requestId)
}



//  This is a function which will create 5 fetch API request for every requestId==>
getData=(requestId)=>{
jsonBodyHotel : will have requestId & other stuff 

  const response = fetch("/API/GetResult" + "?rv=" + Math.random(), {
          method: "POST",
      body: jsonBodyHotel,
      headers: {
        "Content-type": "application/json; charset=UTF-8",
      },
    },this.state.signal)
}