web-dev-qa-db-fra.com

Annuler la requête précédente en utilisant axios avec vue.js

J'utilise axios et vue.js. Je l'ai sur Google et je vérifie la documentation axios, mais je ne comprends toujours pas comment le faire.

vue.jsvuejs2axios
3
Ready Dev

Jetez un oeil à annulation axios

Il y a aussi une très bonne bibliothèque ici

Si vous ne l'obtenez toujours pas, regardez ci-dessous:

<template>
  <div>
    <button @click="send">Send Request</button>
    <button @click="cancel">Cancel Request</button>
    {{message}}
  </div>
</template>

Et le script:

<script>
import axios from 'axios'
const CancelToken = axios.CancelToken;
let cancel;

export default {
    data () {
    return {
        message: ''
    }
  },
    methods: {
    send () {
        this.message = 'Request is beign executed...'
        axios.get('here_put_the_url', {
        cancelToken: new CancelToken(function executor(c) {
          // An executor function receives a cancel function as a parameter
          cancel = c;
        })
      }).then(response => this.message = 'The response from server is:' + response)
    },
    cancel () {
        cancel()
      this.message = 'The request cancelled'
    }
  }
}

</script>

Exemple avec post request:

        axios.post
        (
         'here_put_the_url', 
          { params_here }, 
          {
            cancelToken: new CancelToken(function executor(c) {
            // An executor function receives a cancel function as a parameter
            cancel = c;
          }
         )
3
roli roli

Dans cet exemple, la demande en cours est annulée au démarrage d’une nouvelle. Le serveur répond au bout de 5 secondes si une nouvelle demande est lancée avant l’ancienne. La variable cancelSource spécifie un jeton d'annulation pouvant être utilisé pour annuler la demande. Pour plus d'informations, consultez la documentation 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>

2
live2

D'abord définir des variables

data: function () {
    return {
        request_source : ''
    }
},

Puis à l'intérieur de la méthode

source = CancelToken.source();
if(this.request_source != '')
    this.request_source.cancel('Operation canceled by the user.');

this.request_source = source;

axios
   .get(
       URL,
          {
              params:{key1: value1},
              cancelToken: this.request_source.token
          }
    )
0
Abdunnasir K P