利用axios CancelTokenSource控制请求时序

首先引入axios 和 CancelTokenSource

import axios, { CancelTokenSource } from 'axios';

获取 CancelToken 实例

const { CancelToken } = axios;

获取 source 实例

// source?: CancelTokenSource;
const source = CancelTokenSource;

判断请求实例是否存在

// axios 支持取消请求，详情请参考 https://github.com/axios/axios#cancellation
// 取消未完成请求，以保证请求时序正确
if (source) {
    // 取消请求并重置状态 
    source.cancel();
    source = null;
}

获取token

source = CancelToken.source();
const cancelToken = source.token;

请求

axios({
    url:'',
    method:'post/get',
    data: params, // 请求参数
    withCredentials: true, // 允许跨域携带cookie信息
    header: {
        'Content-Type': 'application/json',
        // 或者
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    cancelToken,
})

看最后的效果