Javascript react中的动态获取函数

我正在尝试编写一个可以重用的函数，以便在我的react应用程序中发出不同的获取请求。但是我得到了意外的空值，函数的执行顺序让我感到困惑。在下面的代码中，我在将数据值分配给临时变量并打印预期输出之前记录了数据值，但临时变量打印为空-还应注意，即使我在之后打印了临时变量，临时变量在数据打印之前打印。。。我在app.js组件的componentDidMount（）方法中调用此函数。有人知道为什么我无法将fetch请求中的数据分配给变量并返回它吗

  testDynamicAPI(e) {
    var temp;
    fetch(e)
      .then(response => response.json())
      .then(data => { 
        console.log(data);
        temp= data
      });
    console.log(temp);
    return temp;
  }

---

Fetch是一个异步API。这意味着它不会立即完成，也不会在完成之前阻塞。但一旦完成，它将通知您（代码），同时其他代码将继续运行

一种方法（除了使用async/await进行抓取之外，请参见下文）是传递回调函数，当抓取完成并将抓取的数据作为参数时，将调用该回调函数

例如：

testDynamicAPI(e, callback) {
    fetch(e)
      .then(response => response.json())
      .then(callback);
  }

你使用的是：

testDynamicAPI(url, data => console.log(data));

testDynamicAPI(url).then(data => console.log(data));

testDynamicAPI(url)
  .then(data => console.log(data)); 

由于

fetch

返回一个值，因此您也可以简单地返回

fetch

并使用

绑定后续处理程序。然后
方法：

testDynamicAPI(e) {
    return fetch(e)
      .then(response => response.json());
  }

你使用的是：

testDynamicAPI(url, data => console.log(data));

testDynamicAPI(url).then(data => console.log(data));

testDynamicAPI(url)
  .then(data => console.log(data)); 

您还可以使用，例如：

你使用的是：

testDynamicAPI(url, data => console.log(data));

testDynamicAPI(url).then(data => console.log(data));

testDynamicAPI(url)
  .then(data => console.log(data)); 

异步代码就是这样工作的。您的外部
console.log（temp）
在api完成执行之前执行。在react中，您应该使用来管理组件中的数据。要重用api函数，可以返回承诺

。。。
状态={
apiData:[]
}
testDynamicAPI（e）{
回传（e）
.then（response=>response.json（））
}
...
componentDidMount（）{
这个.testDynamicApi（'/someUrl'）。然后（数据=>{
控制台日志（数据）；
this.setState（{apiData:data}）
});
}
}
...
运行fetch函数后，当temp仍然未定义时，将立即调用return。由于fetch是一个异步函数，它将花费时间完成一些事情，然后回调或承诺被解析。您忘记了javascript最重要的部分。您可以使用async，像这样等待

  async testDynamicAPI(e) {
const response=  await fetch(e);

return response.json();

}
您是否尝试使用
async wait
而不是
fetch
？请查看这两种方法的重复项。虽然它是React，但您只需像其他React应用程序一样使用
setState
。简而言之：您需要更多地理解异步和响应。fetch是异步的，因此它取决于请求和响应时间来打印其中的日志，而fetch之外的任何方法（包括“return temp”）都将在fetch完成执行之前起作用。试着把return放在“.then”中。请注意，如果您的代码中有多个then like，则同样是异步的，其中每个then like都独立运行。你可以分离到不同的承诺，然后使用promise1，promise2，promise1，promise2，然后（…..依此类推..我没有在这个函数中设置状态，因为我想在这里返回数据，这样我就可以在不同的api调用中重用这个函数。在这里设置状态不允许：）