"Cancelación"

AbortController

Empezando desde v0.22.0 Axios soporta el AbortController (opens new window) para cancelar peticiones de la misma forma que la API de fetch:

const controller = new AbortController();

axios
  .get("/foo/bar", {
    signal: controller.signal,
  })
  .then(function (response) {
    //...
  });
// cancelar la peticion
controller.abort();

CancelToken obsoleto

También puedes cancelar una petición usando un CancelToken.

La API token de cancelación está basado en la propuesta propuesta para cancelar promesas (opens new window).

Esta API es obsoleto desde v0.22.0 y no debería ser usada en proyectos nuevos

Puedes crear un token de cancelación usando el factory CancelToken.source a como se muestra a continuación:

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

axios
  .get("/user/12345", {
    cancelToken: source.token,
  })
  .catch(function (thrown) {
    if (axios.isCancel(thrown)) {
      console.log("Peticion Cancelada", thrown.message);
    } else {
      // Manejar error
    }
  });

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

// cancelar la petición (el parámetro mensaje es opcional)
source.cancel("Operation canceled by the user.");

También puedes crear un token de cancelación pasando una función ejecutora al constructor del CancelToken:

const CancelToken = axios.CancelToken;
let cancel;

axios.get("/user/12345", {
  cancelToken: new CancelToken(function executor(c) {
    // Una función ejecutora recibe una función de cancelación como parámetro
    cancel = c;
  }),
});

// cancelar la petición
cancel();

Nota: puedes cancelar muchas peticiones con el mismo token / signal.

Durante el periodo de transición, puedes usar ambas APIs de cancelación, aun para la misma petición:

const controller = new AbortController();

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

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

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

// cancelar la petición (el parámetro mensaje es opcional)
source.cancel("Operation canceled by the user.");
// O
controller.abort(); // el parámetro mensaje no es soportado