useEffect链接获取调用

Question

我链接两个获取调用检索数据。第一次调用获得令牌，然后第二次调用使用该令牌获取数据。下面是一个例子:

fetch("[GET THE TOKEN]")
.then((response) => response.json())
.then(token => {
fetch("[GET DATA]?token="+token)
.then((response) => response.json())
.then((data) => {
return data;
});
})

问题是，有时我需要在同一个组件中进行许多不同的调用，并且一遍又一遍地编写链式调用可能会变得乏味，如果我需要进行更改，则需要编辑大量代码。

我想出了一个功能解决方案，但我还没有对它进行压力测试。我还是一个反应新手，所以反馈会很有帮助

context.jsx

const [token,setToken] = useState('')
const fetchToken = async () => {
fetch("[GET THE TOKEN]")
.then(response => response.json())
.then(data => {
setToken(data);
});  
}

component.jsx

const {token, fetchToken } = useContext(context)
//fetch data function
const [initFetch,setInitFetch] = useState(false);
const fetchData = () => {
fetch("[GET DATA]?token="+token)
.then((response) => response.json())
.then((data) => {
return data;
});
}
//action that inits fetch data
const submitForm = () => {
setInitFetch(true)
}
//useEffect that will trigger the function on initFetch and token const changing values
useEffect(() => {
if (token && initFetch === true) {
fetchData();
}
},[token,initFetch]);

Answer 1

我看到您想在提交表单时将其称为fetch function，因此，您不应该使用useEffect，因为您不需要这样做。

使用useCallback钩子并在其中创建一个async函数。在任何你想要的地方调用它。

:

const MyComponent = () => {
const {token, fetchToken } = useContext(context)
const [initFetch, setInitFetch] = useState(false);
const fetchData = useCallback(async () => {
const response1 = await fetch(`[GET DATA]?token=${token}`);
const jsonFromResponse1 = await response1.json();
return jsonFromResponse1;
}, [token])
const randomFunc = async () => {
const data = await fetchData()
}
return (
<button onClick={fetchData}>Button</button>
)
}

useCallback的依赖数组是至关重要的，如果你不插入它，当令牌改变时，钩子将永远不会用它的新值更新函数。

您可以继续使用then。但我强烈建议您尝试await/async。它会使你的代码更容易读。

Answer 2

我从你的问题中得到的是，你正在寻找一些方法来不重复你的fetch调用。如果是这样，我相信您可以使用自定义钩子，以便每次需要时都可以调用它。像这样的

const useFetchFn=(arg)=>{
fetch(arg)
.then((response) => response.json())
.then((data) => {
return data;
});
}

然后在你的组件

const [token,setToken] = useState('')
const fetchToken =useFetchFn("[GET THE TOKEN]")