编辑:仅在 Firefox 中反应应用程序崩溃。当我使用 chrome 时,反应应用程序不会崩溃。如何处理 Firefox 中的崩溃问题?
我想在组件卸载时取消http请求。我使用 fetch() 和 AbortController。
我正在跟进本指南 https://stackoverflow.com/a/49906662/11241731.
但是当组件卸载时,反应应用程序崩溃。
这是我的代码:
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>)
}
来自 MSDN:
注意:当 abort() 被调用时, fetch() Promise 会拒绝并返回一个 DOMException 类型的错误,名称为 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()
}
}, [])
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)