Vue核心技术-50,Axios-取消请求

一,前言

如果访问一个接口长时间没有返回,不管是服务还是网络问题,用户都有权取消等待
axios提供了使用cancel token取消请求的功能
这篇介绍如何实现axios的取消操作

二,取消请求

方法一:

使用CancelToken.source工厂方法创建cancel token

//使用CancelToken.source工厂方法创建cancel token
var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token      //cancelToken取消请求
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

方法二:

通过传递一个executor函数到CancelToken的构造函数来创建 cancel token

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor函数接收一个cancel函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

可以使用同一个 cancel token 取消多个请求