【cancelToken】axios取消请求

🧐 这次碰到一个问题，初始化页面，某些原因导致会请求依次两个接口，实际上只需要其中一次的接口返回数据；
但是由于接口响应速度不一致，导致最后拿到的数据并不是最后那次请求的结果；
🤓 我们知道promise的有一个明显缺点就是，无法取消请求；不过axios作为一个成熟的插件，有提供API，满足我们的这种需求。
🔍于是找到解决办法是，使用 axios.CancelToken构造函数 生成取消函数【方法1】

1️⃣ axios.CancelToken构造函数

CancelToken构造函数生成取消函数

 let cancelFn: any; // 取消函数
 useEffect(() => {
    if (满足request1请求条件) {
      cancelFn && cancelFn(); //使用request1 就取消request2
      request1();
    } else  { /使用request1 取消request1
      cancelFn && cancelFn();
      request2();
    }
  }, []);

// 第一个请求
    const request1 = async () => {
    const { CancelToken } = axios;
    const res: any = await request({
      url: '/api/datat******nary',
      method: 'POST',
      params: {
        name: searchKey,
        datasourceId: currentSource,
      },
      cancelToken: new CancelToken((cf: any) => {
        cancelFn = cf;
      }),
    });
    
// 第二个请求
  const request2 = aysnc () => {
    const { CancelToken } = axios;
    const res: any = await request({
      url: '/api/**********tionary',
      method: 'GET',
      params: {
        name: searchKey,
      },
      cancelToken: new CancelToken((cf: any) => {
        cancelFn = cf;
      }),
    });

针对单个请求A发多次的情形(A1,A2...An), An都会带上cancelToken（标记），A(n+1)发起时会将An请求直接canceled(不再处理An请求响应)

2️⃣ axios.CancelToken.source

CancelToken.source生成取消令牌token和取消方法cancel

  const CancelToken = axios.CancelToken;
  const source = CancelToken.source();

  axios.get('/user/12345', {
    cancelToken: source.token
  }).catch(function(thrown) {
    if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
    } else {
    // handle error
     }
  });

  axios.post('/user/12345', {
    name: 'new name'
  }, {
    cancelToken: source.token
  })

  source.cancel('Operation canceled by the user.');