cómo cancelar / abortar la solicitud ajax en axios

Solución:

Axios no admite la cancelación de solicitudes en este momento. Consulte este problema para obtener más detalles.

ACTUALIZACIÓN: Se agregó soporte de cancelación en axios v0.15.

EDITAR: La API de token de cancelación de axios se basa en la propuesta de promesas cancelables retiradas.

Ejemplo:

const cancelTokenSource = axios.CancelToken.source();

axios.get('/user/12345', {
  cancelToken: cancelTokenSource.token
});

// Cancel request
cancelTokenSource.cancel();

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) => {
        //responce Body
      })
      .catch((error) => {
        if (axios.isCancel(error)) {
          console.log("post Request canceled");
        }
      });
  }

  render() {
    return <h2>cancel Axios Request</h2>;
  }
}

export default Abc;

Por lo general, desea cancelar la solicitud ajax anterior e ignorar su próxima respuesta, solo cuando se inicia una nueva solicitud ajax de esa instancia, para este propósito, haga lo siguiente:

Ejemplo: obtener algunos comentarios de la 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) => {
        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
        }
    });
}

---

---

Utiliza Nuestro Buscador