请求的取消

有时在多次请求情况下，会出现请求和结果表现的不一样。这种情况大多是因为网络传输速度导致，因为请求并不是先进先出，如图效果：

我们希望的是这样：

此时需要抛弃掉前置请求，直接相应最新的一个。这时就用到 CancelToken 机制，当调用这个 token 的时候，系统会知道当前这个请求已经没用了，浏览器会取消继续请求，直接抛弃

// 以 axios 为例，本例中默认已经配置好 axios，直接使用
import axios from 'axios';

const CancelToken = axios.CancelToken;
let cancel;

const request = axios({
  // ...
});

function fetchData() {
  // cancel 存在则取消前一个
  if (cancel) cancel('Request canceled');

  // 发起请求
  request.get('/url', {
    cancelToken: new CancelToken(c => (cancel = c));
  }).then(res => {
    console.log('response', res);
  }).catch(err => {
    if (axios.isCancel(error)) {
      console.log('request canceled', error.message);
    } else {
      console.error('Error', error)
    }
  })
}

// 调用
fetchData(); // 第一次请求
fetchData(); // 第二次请求。如果本地请求时，第一次请求还未返回结果，则会取消第一次的请求，在浏览器中可以看到请求状态被 cancel

当我们重复请求时，系统会自行取消，并且我们在控制台可以看到如下内容：

此时，对应的之前的请求已经是取消状态。