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

Posted

技术标签:

【中文标题】使用 axios 和 vue.js 取消先前的请求【英文标题】:Cancel previous request using axios with vue.js 【发布时间】:2018-11-04 02:24:02 【问题描述】:

我正在使用axiosvue.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项目中的安装使用以及基本的请求方法

vue.js中axios的封装(参考)

使用 Axios 在 Vue.js 中取消多个 API 调用

Axios-一次发出多个请求(vue.js)

Axios 获取请求返回 [代理代理] - Flask 和 Vue.js

使用Vue js调用axios发布请求时出现CORS和网络错误