未处理的拒绝（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() Promise 会拒绝并返回一个 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()
      }
  }, [])