前端终止接口请求

1 CancelToken

1.1 创建CancelToken

import { useRef } from 'react'
import axios from 'axios'
const cancelTokenRef = useRef(null)
const CancelToken = axios.CancelToken

1.2 添加CancelToken

axios.get(url, {
	timeout: 1000 * 6, // 接口超时
	cancelToken: new CancelToken(function (c) {
		cancelTokenRef.current = c // 绑定到ref
	})
})

1.3 终止请求

// 触发handleCancel即可终止请求
const handleCancel = () => {
	if (cancelTokenRef.current) {
		cancelTokenRef.current('接口已取消~')
    	cancelTokenRef.current = null
	}
}

2 AbortController

2.1 创建AbortController

let controller = new AbortController()

2.2 添加AbortController

axios.get(url, {
	signal: controller.signal
})

2.3 终止请求

const handleCancel = () => {
	if (controller) {
		controller.abort()
		controller = null
	}
}

www.axios-http.cn