I am using axios for API requests, I have a situation where I want to abort all running/pending requests and create new with another API.

Have tried below code

async getOldResponse() {
    const response_old: any = await this.axios.post("/search_old", this.searchData);
    console.log(response_old)
}
async getOldOtherResponse() {
    const response_old_second: any = await this.axios.post("/search_old_second", this.searchData);
    console.log(response_old_second);
}
async getNewSearch() {
    // here i want to cancel all pending requests.
    const CancelToken = this.axios.CancelToken;
    const source = CancelToken.source();
    source.cancel('All previous pending request cancelled');
    const response: any = await this.axios.post("/search_new", this.searchData);
    console.log(response);
}
ngOnInit() {
    this.getOldResponse();
    this.getOldOtherResponse();
    this.getNewSearch();
}

Basically I want to abort /search_old & search_old_second API requests and create search_new.

I am using axios for API requests, I have a situation where I want to abort all running/pending requests and create new with another API.

Have tried below code

async getOldResponse() {
    const response_old: any = await this.axios.post("/search_old", this.searchData);
    console.log(response_old)
}
async getOldOtherResponse() {
    const response_old_second: any = await this.axios.post("/search_old_second", this.searchData);
    console.log(response_old_second);
}
async getNewSearch() {
    // here i want to cancel all pending requests.
    const CancelToken = this.axios.CancelToken;
    const source = CancelToken.source();
    source.cancel('All previous pending request cancelled');
    const response: any = await this.axios.post("/search_new", this.searchData);
    console.log(response);
}
ngOnInit() {
    this.getOldResponse();
    this.getOldOtherResponse();
    this.getNewSearch();
}

Basically I want to abort /search_old & search_old_second API requests and create search_new.

• javascript
• node.js
• angular
• typescript
• axios

• Did you find your answer? I'm having a similar situation – Karma Blackshaw Commented Oct 17, 2022 at 7:26

2 Answers 2

You can use cancellation

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

I am not sure about this, but from what i remember it would be something like this.

Taken from axios documentation https://github./axios/axios

/* create cancel token */
const CancelToken = this.axios.CancelToken;
const source = CancelToken.source();

/* fire requests whose only purpose is to be canceled */
const response_old: any = await this.axios({
  method: 'post',
  cancelToken: source.token,
  url: '/search_old',
  data: this.searchData
})
const response_old_second: any = await this.axios({
  method: 'post',
  cancelToken: source.token,
  url: '/search_old_second',
  data: this.searchData
})

/* cancel all previous pending requests */
source.cancel('optional message')

/* fire new request */
const response: any = await this.axios.post("/search_new", this.searchData);