在useFetch上使用GET请求稍后运行异步调用

Question

稍后，我试图通过使用Reacti-异步库中的useFetch来运行一个获取请求。我想用一个效果挂钩来运行它。

import React, {useEffect} from 'react';
import { useFetch } from "react-async"

const Example = (props) => {
  const headers = { Accept: "application/json" }
  const { data, error, isPending, run } = useFetch("http://www.mocky.io/v2/5eac28e4330000a215dfe24d",{ method: "POST", headers });

  useEffect(() => {
    // token = await retrieveToken;
    run(init => ({
      ...init,
      headers: {
        ...init.headers,
        Authentication: "thetoken",
      },
    }))
  },[]);


  if (isPending) return <div>Loading</div>
  if (error) return <div>`Something went wrong: ${error.message}`</div>
  if (data)
    return (
      <div>
        {JSON.stringify(data)}
      </div>
    );
  else {
    return <div>Loading</div>
  }
}
export default Example;

fetch调用会立即运行，而不会产生效果。当我将方法更改为POST时，根据预期的效果进行提取调用。

我怎样才能使它为GET请求工作？

Answer 1

react异步useFetch接受options对象作为第三个param。此options对象接受延迟参数，如果设置为true，则延迟执行。默认情况下，它是由请求方法确定的。

根据文档

如果defer为真，则允许使用deferFn，如果为false，则启用使用promiseFn。默认情况下，这是根据请求方法自动选择的(deferFn用于POST / PUT /修补程序/ DELETE，否则为promiseFn )。

使用您的useFetch方法，如

const { data, error, isPending, run } = useFetch("http://www.mocky.io/v2/5eac28e4330000a215dfe24d",
                                        { method: "GET", headers }, 
                                        {defer: true}
                                       );