Question

我正在使用axios和vue.js。我已经谷歌了，检查axios docs但仍然无法理解如何操作。

Answer 1

查看axios cancellation

还有一个非常好的库here

如果你仍然没有得到它，请看下面的内容：

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

脚本：

<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>

发布请求的示例：

        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;
          }
         )

Answer 2

在此示例中，当一个新请求开始时，当前请求被取消。如果在取消旧请求之前触发了新请求，服务器将在5秒钟后响应。 cancelSource指定可用于取消请求的取消令牌。有关更多信息，请检查axios documentation。

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>

Answer 3

首先定义一些变量

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

然后在方法内部

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
          }
    )

使用带有vue.js的axios取消先前的请求

3 个答案: