0

我正在尝试在返回值的 api 中调用端点，我梦想在另一个函数中调用此 fetch 函数，然后将其保存到变量中。

但这会返回一个承诺，或者如果我让它工作，该函数会在返回值之前调用其他东西。

是做超时的唯一方法吗？

这是一个代码示例

async function someFetch() {
  const res = await fetch("someurl");
  const data = res.json();
  return data;
}

function useFetched(someInput1, someInput2) {
  const fetchedData = someFetch(); // need this input before anything else is called

  const some_var = fetchedData + someInput1 + someInput2;

  return some_var;
}

我还尝试使第二个函数异步并在 someFetch() 之前调用 await，但这会返回一个承诺。

4

2 回答 2

1

你需要await的结果someFetch

async function useFetched(someInput1, someInput2){
    const fetchedData = await someFetch() // need this input before anything else is called

    const some_var = fetchedData + someInput1 + someInput2

    return some_var
}
于 2020-06-08T13:45:51.450 回答
0

您不能进行异步 useFetch [hook]。您需要在这里使用回调。粗略的想法，您可以将 setter 函数传递useFetch给设置值。然后可以使用该值。

样本：

async function fetchTodo() {
  const res = await fetch("someurl");
  const data = res.json();
  return data;
}

function useFetched(id, callback) {
  useEffect(() => {
    fetchTodo(id).then(data => {
      console.log(data);
      callback(data);
    });
  }, [id, callback]);
}

工作样本：

import React, { useEffect, useState } from "react";
async function fetchTodo(id) {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos/" + id);
  const data = res.json();
  return data;
}

function useFetched(id, callback) {
  useEffect(() => {
    fetchTodo(id).then(data => {
      console.log(data);
      callback(data);
    });
  }, [id, callback]);
}
export default function App() {
  const [data, setData] = useState({});
  useFetched(1, setData);
  if (!data) return <h1>Loading...</h1>;
  return (
    <div className="App">
      <h1>{JSON.stringify(data)}</h1>
    </div>
  );
}

沙盒：https ://codesandbox.io/s/misty-smoke-ls2y4?file=/src/App.js:0-607

于 2020-06-08T13:56:15.337 回答