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

【问题标题】：React-Async call run later with GET request on useFetchReact-Async 调用稍后在 useFetch 上使用 GET 请求运行
【发布时间】：2020-08-16 00:59:43
【问题描述】：

我稍后会尝试使用 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;

fetch 调用会立即运行，但不会生效。当我将方法更改为 POST 时，将按预期从效果中进行 fetch 调用。

如何使它适用于 GET 请求？

【问题讨论】：

标签： reactjs asynchronous async-await react-hooks react-async

【解决方案1】：

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

根据 documentation

defer 如果为真则启用deferFn，如果为真则启用promiseFn 错误的。默认情况下，这是根据请求自动选择的方法（POST / PUT / PATCH / DELETE 为 deferFn，否则为 promiseFn）。

使用你的 useFetch 方法

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

【讨论】：