axios如何取消请求

拼搏现实的明天。 2022-04-22 04:08 455阅读 0赞

场景：小邹最近在使用axios时碰到一个问题，就是我想在特性条件时取消请求，以便减少不必要的前后接口交互。我们知道ajax取消请求的方式有两种：一种是通过设置时间，超时自动断开，另一种我们可以调用XMLHttpRequest对象上的abort方法。那我们在使用axios过程中该如何取消请求呢？小邹翻了一下官方的文档是这么说的：You can cancel a request using a cancel token.The axios cancel token API is based on the withdrawn cancelable promises proposal. You can create a cancel token using the CancelToken.source factory as shown below:

查找axios的文档，发现可以通过使用CancelToken来取消axios发起的请求，小邹就来写一个DEMO：

var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Axios!',
        source: null
      },
      methods: {
        sendRequest() {
          this.source = this.axios.CancelToken.source(); // 这里初始化source对象
          this.axios.get(url, {
            cancelToken: this.source.token // 这里声明的cancelToken其实相当于是一个标记，
                                           // 当我们要取消请求的时候，可以通过这个找到该请求
          })
          .then(res => {
            // 你的逻辑
          })
          .catch(res => {
            // 如果调用了cancel方法，那么这里的res就是cancel传入的信息
            // 你的逻辑
          })
        },
        cancel() {
          this.source.cancel('这里你可以输出一些信息，可以在catch中拿到')
        }
      }
    })

使用非常的简单，希望对大伙有用！