axios取消请求

取消请求API

AbortController

axios版本 v0.22.0 开始，Axios支持以 fetch API 方式，取消请求 AbortController

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

CancelToken

由于项目中使用的axios版本在 v0.22.0 以下，故采取canceltoken的方式进行请求的撤销，这个API已经过时，所以也可以通过升级axios，使用上面的方式

项目采用umi+dva构建方式，在组件中引入取消的逻辑

react组件中使用

const getDetail = useCallback(() => {
        const {environment, project} = queryParams;
        if(!environment || !project || !selectedTable) return;
        if(cancelQuery) {
            cancelQuery('请求被取消了');
        }
        setLoading(true);
        dispatch({
            type: 'warehouse/getDataViewDetail',
            payload: {
                environment: environment,
                project: project,
                name: selectedTable
            },
            cancelToken: new CancelToken(function executor(cancel) {
                cancelQuery = cancel
            })
        }).then((res: any) => {
            console.log(`res`, res)
            if(res) {
                setBaseInfo(res.data);
                setLoading(false);
            }
            
        })
    }, [selectedTable, queryParams]);

model 文件，对封装的请求传入 cancelToken

此处request是通过axios封装的一个请求方法，会将call调用的第二个参数对象作为配置对象传给axios

import { axioRequest as request } from '@/utils/axios';
export default {
	effects: {
		*getDataViewDetail({ payload = {}, cancelToken }, { call, put, select }) {
		    yield put({
		        type: 'save',
		        payload: {
		            fieldsList: []
		        }
		    })
		    const res = yield call(request, {
		        url: '/xxx/handle/query/data/description',
		        data: payload,
		        cancelToken
		    });
		    if (res && res.data) {
		        yield put({
		            type: 'save',
		            payload: {
		                fieldsList: res.data.data?.fields
		            }
		        })
		        return res.data;
		    } else {
		        return res;
		    }
		}
	}
}

request请求方法封装

import { message } from 'antd'
import axios from 'axios';

export function axioRequest(config) {
    if (config.url && reg.url.test(config.url)) {
        config.baseURL = ''
    }
    // 添加请求拦截器
    axios.interceptors.request.use(
        (config) => {

            if ('undefined' !== typeof caches && caches) {
                caches.match(config.url).then((response) => {
                    if (response) {
                        response.json().then(function updateFromCache(json) {
                            config.callback && 'function' === typeof config.callback && config.callback(json)
                        })
                    }
                });
            }
            let uniToken = localStorageUtil.get('uniToken')
            if (uniToken && '' !== uniToken) {
                config.headers.Authorization = uniToken
            }
            return config;

        },
        error => {
            console.log('interceptorserror', error)
            return Promise.reject(error)
        }
    )
    //添加响应拦截器
    axios.interceptors.response.use(
        response => {
            return response
        },
        error => {
        	// 这里判断是否为手动取消请求，并将取消时传入的内容打印出来
            if(axios.isCancel(error)) {
                console.log('Request canceled', error.message)
            }
            return errorStatusCodeCallBack(error)
        }
    )
    let TConfig = { ...defaultConfig, ...config }
    try {
        return axios(TConfig)
            .then((data) => {
                if (!data || !data.data || !data.status || 200 !== data.status) {
                    message.error({
                        content: '服务器数据处理失败,请重试',
                        duration: 5,
                        key: 'server_handle_error'
                    })
                    return false
                }
                if (data.data.statusCode !== 200) {
                    if (!bussinessProcessError(data, TConfig)) return false
                }
                return data
            })
            .catch(err => (err))
    } catch (error) {
        throw error
    }
}

总结

到这里基本完成了从组件请求方法调用，model层设计，到请求axios封装，拦截器的设计等的整个链路的设计，相信是比较全面易于理解的。这里为大家放上axios的网站链接，可以查看与自己项目联系更加紧密的关于axios的使用。
axios 取消请求