vue.js学习笔记（五）--axios中取消请求

「爱情、让人受尽委屈。」 2022-06-11 00:07 1160阅读 0赞

> 博客：[https://fisher-zh.github.io/][https_fisher-zh.github.io]

在平时的开发过程中，我们会经常遇到菜单切换的问题，在一些切换频率较低的情况下，在切换到另一个页面的时候，上一个页面基本没有未完成的异步请求，即时有，在一些情况下也是可以忽略的。但是，在一些切换频率较高的页面中，如果我们不处理这些未完成的请求，那么这些请求会极大的影响页面的性能，甚至导致之后的请求超时。

如果需要断开Javascript的ajax请求，一种是通过设置时间，超时自动断开，另一种我们可以调用XMLHttpRequest对象上的abort方法。

在使用Vue的过程中，大多是使用axios来发起http请求，那么在axios中我们要怎么中止某个http请求呢？遍寻网上教程无果后，想起了革命先辈的名言–自己动手，丰衣足食。好了，我要秀英语水平了，那么我们只好自己看英文文档了。打开[axios的github主页][axios_github]，果然文档才是我们的好帮手，很快就找到解决问题的办法。

> 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发起的请求，我们可以自己写一段代码来验证。

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中拿到')
        }
      }
    })

[https_fisher-zh.github.io]: https://fisher-zh.github.io/
[axios_github]: https://github.com/mzabriskie/axios