关于前端:利用axios-CancelTokenSource控制请求时序

9次阅读

共计 593 个字符，预计需要花费 2 分钟才能阅读完成。

首先引入 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,
})