从 fetch 调用中获取返回值答案

【问题标题】：Getting the returned value from a fetch call从 fetch 调用中获取返回值
【发布时间】：2020-06-08 22:06:15
【问题描述】：

我试图在一个返回值的 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，但这会返回一个 promise。

【问题讨论】：

标签： javascript fetch

【解决方案1】：

你需要awaitsomeFetch的结果

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
}

【讨论】：

如果我没有返回 some_var 而不是返回，而是调用了一个处理值的函数，而不是返回。
不，这只是后端调用的一些虚拟代码。基本上这个想法是调用后端以获得返回值（后端调用另一个 api 并进行一些计算）。然后下一个函数进行一些计算，然后由第三个函数调用。因此返回一个值，但解决方法是使用变量调用第二个函数内部的函数，而不是返回在其他地方处理的对象。
正确的方法是在useFetched 上也使用async await 或.then。但是，如果你成功了，做得好吗？
我问是不是反应，因为第二个答案里面有useEffect和stuf，这让我很困惑

【解决方案2】：

你不能使异步 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

【讨论】：