未处理的拒绝（AbortError）：操作被中止

Question

编辑：React 应用程序仅在 Firefox 中崩溃。当我使用 chrome 时，React 应用不会崩溃。如何处理 Firefox 中的崩溃？

我想在卸载组件时取消 http 请求。我正在使用 fetch() 和 AbortController。

我正在关注。

但是当组件卸载时，react 应用程序崩溃了。

这是我的代码：

import React, { useEffect, useState } from 'react'
import AbortController from "abort-controller"

function Label(){
  const abortController = new AbortController()
  const signal = abortController.signal
  const [labels, setLabels] = useState([])

    useEffect(() => {
      async function getLabels(){
          const req = await fetch(`${process.env.REACT_APP_SERVER_URL}/label`, {
              credentials: 'include',
              signal: signal
          })
          const res = await req.json()
        
          setLabels(res.data)
      }
    
      getLabels()
    
      // cancel httprequest if component unmounted
      return function cancel(){
          abortController.abort()
      }
  }, [])


return (<p>ehehe</p>)

}

Answer 1

来自 MSDN：

Note: When abort() is called, the fetch() promise rejects with an Error of type DOMException, with name AbortError.

所以你得到了异常，因为事实上你在获取时调用了 abort。我建议以这种方式修改您的 useEffect：

useEffect(() => {
      async function getLabels(){
          try {
             const req = await fetch(`${process.env.REACT_APP_SERVER_URL}/label`, {
              credentials: 'include',
              signal: signal
             })
             const res = await req.json()
        
             setLabels(res.data)
          }
          catch(error) {
             if (error.name === "AbortError") return;
             console.log("Error ", error);
          }
      }
    
      getLabels()
    
      // cancel httprequest if component unmounted
      return function cancel(){
          abortController.abort()
      }
  }, [])

未处理的拒绝（AbortError）：操作被中止

Unhandled Rejection (AbortError): The operation was aborted

fetch

request-cancelling

reactjs