React-Async 调用 运行 稍后在 useFetch 上使用 GET 请求

Question

我正在尝试 运行 稍后使用 React-Async 库中的 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;

获取调用 运行 立即生效，尚未生效。当我将方法更改为 POST 时，如预期的那样从效果中进行提取调用。

如何使其适用于 GET 请求？

Answer 1

react-async useFetch 将选项对象作为第三个参数。此选项对象采用延迟参数，如果设置为 true，则延迟执行。默认由请求方式决定

根据 documentation

defer Enables the use of deferFn if true, or enables the use of promiseFn if false. By default this is automatically chosen based on the request method (deferFn for POST / PUT / PATCH / DELETE, promiseFn otherwise).

像这样使用你的 useFetch 方法

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