AbortController中断请求

AbortController是一个控制器对象，允许你根据需要中止一个或多个 Web请求。

他通过在请求中传入一个信号量，然后在需要的中断请求的时候通过abort方法进行中断请求。

它的兼容性：ie不支持

1. 创建abortController对象

const abortControllerObj = new AbortController()

2. 创建信号量

const signal = abortControllerObj.signal

3. 使用

const requestTaskList = useCallback((): Promise<
    taskList[]
  > => {
    try {
      const res =  await fetch('/api/task/list', {signal})

      return (res?.length && res) || []
    } catch (e) {
      handleError(e)
      return []
    }
  }, [])

4. 中断

  useEffect(() => {
   const abortControllerObj = new AbortController()
	 setSignal(abortControllerObj.signal)
   setList(requestTaskList())  
    return ()=>{
    	abortControllerObj.abort()
    }
  }, [])

5. 全部代码

const [singal,setSignal] = useState()

useEffect(() => {
   const abortControllerObj = new AbortController()
  setSignal(abortControllerObj.signal)
  setList(requestTaskList()) 
    return ()=>{
    	abortControllerObj.abort()
    }
  }, [])


const requestTaskList = useCallback((): Promise<
    taskList[]
  > => {
    try {
      const res =  await fetch('/api/task/list', {signal})

      return (res?.length && res) || []
    } catch (e) {
      handleError(e)
      return []
    }
  }, [])