reactjs - 未处理的拒绝 (AbortError)：操作已中止

Question

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

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

我遵循本指南。

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

这是我的代码：

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：

注意：当 abort() 被调用时，fetch() 承诺会以 DOMException 类型的错误拒绝，名称为 AbortError。

所以你得到了异常，因为事实上你调用abort了 fetch。我建议以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()
      }
  }, [])