Cancelar la solicitud anterior usando axios con vue.js

Solución:

ACTUALIZACIÓN 2020: Cómo cancelar una solicitud de axios

generar un cancelToken y guárdalo

import axios from 'axios'
const request = axios.CancelToken.source();

pasa el cancelToken a la solicitud de axios

axios.get('API_URL', { cancelToken: request.token })

Acceda a la solicitud que almacenó y llame al .cancel() método para cancelarlo

request.cancel("Optional message");

Véalo en vivo en una pequeña aplicación en codesandbox

---

---

Eche un vistazo a la cancelación de axios

---

---

Un ejemplo sencillo que puedes verlo en directo.

HTML:

<button @click="send">Send</button>
<button :disabled="!request" @click="cancel">Cancel</button>

JS

import axios from "axios";

export default {
  data: () => ({
    requests: [],
    request: null
  }),

  methods: {
    send() {
      if (this.request) this.cancel();
      this.makeRequest();
    },

    cancel() {
      this.request.cancel();
      this.clearOldRequest("Cancelled");
    },

    makeRequest() {
      const axiosSource = axios.CancelToken.source();
      this.request = { cancel: axiosSource.cancel, msg: "Loading..." };
      axios
        .get(API_URL, { cancelToken: axiosSource.token })
        .then(() => {
          this.clearOldRequest("Success");
        })
        .catch(this.logResponseErrors);
    },

    logResponseErrors(err) {
      if (axios.isCancel(err)) {
        console.log("Request cancelled");
      }
    },

    clearOldRequest(msg) {
      this.request.msg = msg;
      this.requests.push(this.request);
      this.request = null;
    }
  }
};

En este ejemplo, la solicitud actual se cancela cuando comienza una nueva. El servidor responde después de 5 segundos si se activa una nueva solicitud antes de que se cancele la anterior. los cancelSource especifica un token de cancelación que se puede utilizar para cancelar la solicitud. Para obtener más información, consulte la documentación de axios.

new Vue({
  el: "#app",
  data: {
      searchItems: null,
      searchText: "some value",
      cancelSource: null,
      infoText: null
  },
  methods: {
    search() {
      if (this.searchText.length < 3)
      {
        return;
      }

      this.searchItems = null;
      this.infoText="please wait 5 seconds to load data";

      this.cancelSearch();
      this.cancelSource = axios.CancelToken.source();

      axios.get('https://httpbin.org/delay/5?search=" + this.searchText, {
        cancelToken: this.cancelSource.token }).then((response) => {
          if (response) {
            this.searchItems = response.data;
            this.infoText = null;
            this.cancelSource = null;
          }
        });
    },
    cancelSearch () {
      if (this.cancelSource) {
        this.cancelSource.cancel("Start new search, stop active search');
        console.log('cancel request done');
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input v-model="searchText" type="text" />
  <button @click="search">Search</button>{{infoText}}
  <pre>
  {{searchItems}}
  </pre>
</div>

---

---

Utiliza Nuestro Buscador