使用 axios 和 vue.js 取消先前的请求
Posted
技术标签:
【中文标题】使用 axios 和 vue.js 取消先前的请求【英文标题】:Cancel previous request using axios with vue.js 【发布时间】:2018-11-04 02:24:02 【问题描述】:我正在使用axios
和vue.js
。我已经谷歌了它,并查看了 axios 文档,但仍然不明白该怎么做。
【问题讨论】:
【参考方案1】:2020 更新:如何取消 axios 请求
生成一个cancelToken
并存储它
import axios from 'axios'
const request = axios.CancelToken.source();
将cancelToken
传递给axios 请求
axios.get('API_URL', cancelToken: request.token )
访问你存储的请求并调用.cancel()
方法取消它
request.cancel("Optional message");
See it live on a tiny app on codesandbox
看看axios cancellation
一个简单的例子,你可以see it live.
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;
;
【讨论】:
除非我在这里遗漏了什么,否则即使请求已完成,这个示例实际上仍会尝试取消请求。 @live2 下面的答案确保在成功请求后将 cancelToken 重置为null
Robin Hoodie 这会取消先前的请求,但如果它已完成则不会。您是否查看了代码框示例?
在您提供的codeandbox(包含优秀的代码)中,您是对的,如果请求完成,您将无法单击取消按钮。我的意思是答案本身中的示例,即使请求被取消,您仍然可以调用cancel
,因为在请求完成时cancel
变量永远不会设置为null
。
@Robin-Hoodie 我更新了我的答案 + 小应用程序 + 一个简单的实例。我希望现在更清楚了。【参考方案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>
【讨论】:
【参考方案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
)
【讨论】:
以上是关于使用 axios 和 vue.js 取消先前的请求的主要内容,如果未能解决你的问题,请参考以下文章
使用 Axios 在 Vue.js 中取消多个 API 调用