我正在使用axios
和vue.js
。我已经谷歌了,检查axios docs但仍然无法理解如何操作。
答案 0 :(得分:3)
还有一个非常好的库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;
}
)
答案 1 :(得分: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>
答案 2 :(得分:0)
首先定义一些变量
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
}
)