使用axios with vue.js取消以前的请求

我正在使用

axios

和

vue.js

。我在谷歌上搜索了它，查看了axios文档，但仍然不知道如何操作

2020更新：如何取消axios请求 生成一个

cancelToken

并存储它 将

cancelToken

传递给axios请求 访问存储的请求并调用

.cancel（）

方法来取消它

---

---

看看

---

---

一个简单的例子，你可以

HTML:

发送
取消

JS

从“axios”导入axios；
导出默认值{
数据：（）=>({
请求：[]，
请求：空
}),
方法：{
发送（）{
如果（this.request）this.cancel（）；
这是makeRequest（）；
},
取消{
this.request.cancel（）；
本.clearOldRequest（“已取消”）；
},
makeRequest（）{
const axiosSource=axios.CancelToken.source（）；
this.request={cancel:axiosSource.cancel，msg:“正在加载…”；
axios
.get（API_URL，{cancelToken:axiosSource.token}）
.然后（（）=>{
此.clearOldRequest（“成功”）；
})
.catch（这个.logResponseErrors）；
},
日志响应错误（err）{
if（axios.isCancel（err））{
控制台日志（“请求已取消”）；
}
},
clearOldRequest（msg）{
this.request.msg=msg；
this.requests.push（this.request）；
this.request=null；
}
}
};

在本例中，当前请求在新请求启动时被取消。 如果在取消旧请求之前触发了新请求，服务器将在5秒钟后应答。

cancelSource

指定可用于取消请求的取消令牌。有关更多信息，请查看

newvue({
el:“应用程序”，
数据：{
searchItems:null，
searchText:“一些值”，
取消源：空，
infoText:null
},
方法：{
搜索（）{
如果（this.searchText.length<3）
{
返回；
}
this.searchItems=null；
this.infoText='请等待5秒以加载数据'；
这是cancelSearch（）；
this.cancelSource=axios.CancelToken.source（）；
axios.get（）https://httpbin.org/delay/5?search=“+this.searchText{
cancelToken:this.cancelSource.token}）。然后（（响应）=>{
如果（答复）{
this.searchItems=response.data；
this.infoText=null；
this.cancelSource=null；
}
});
},
取消搜索（）{
if（this.cancelSource）{
this.cancelSource.cancel（'Start new search，stop active search'）；
log（“取消请求完成”）；
}
}
}
})

搜索{{infoText}}
data: function () {
    return {
        request_source : ''
    }
},

{{searchItems}}

首先定义一些变量

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

然后在方法内部

---

除非我在这里遗漏了什么，否则这个例子实际上仍然会尝试取消一个请求，即使请求已经完成。下面由@live2给出的答案确保在成功请求后cancelToken重置为

null

，这将取消以前的请求，但如果请求已完成则不会。您是否签出了codesandbox示例？在您提供的codesandbox（其中包含优秀的代码）中，您是对的，如果请求已完成，则无法单击cance按钮。我指的是答案本身中的示例，即使请求被取消，您仍然可以调用

cancel

，因为

cancel

变量在请求完成时从未设置为

null

。@Robin Hoodie我更新了我的答案+微型应用程序+一个简单的实时示例。我希望现在更清楚了。

request.cancel("Optional message");

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