axios的取消请求

axios取消请求

在平时开发中会遇到上传文件或者图片的问题，当我们选择好图片，点击上传按钮的时候就已经发出了上传文件的请求，但是如果我们在点击按钮后突然发现了上传文件不是我们想要的时候呢？如何取消已经正在上传的文件流？

axios的CancelToken

axios是一个基于Promise的HTTP库，可以在浏览器和nodejs中使用，在axios中提供了这样的一种方法：

当我们上传一个图片时，请求已经发出，

这个时候就该调用axios的CancelToken：

 const CancelToken = axios.CancelToken;
        this.config = {
          onUploadProgress: (progressEvent) => {
            let complete = parseInt(progressEvent.loaded / progressEvent.total * 100 | 0, 10);
            this.progress = complete;
          },
          cancelToken: new CancelToken(c => {
            this.cancels = c;
          }),
        };

Axios的 cancel token API 基于cancelable promises proposal，它还处于第一阶段。可以使用 CancelToken.source 工厂方法创建 cancel token，将返回的cancel的方法赋值给已经定义好的变量，就可以给对应的取消按钮设置该取消请求的方法，当我们点击取消时就会调用cancel的函数，进而取消请求