如何从.then promise中访问值？

Question

我正在执行以下操作：

fetch("someurl")
.then(data => {return data.json()})
.then(resp => console.log(resp));

现在，通常我从.then函数中对resp进行操作，但是是否有可能将resp分配给变量，或者至少将其存储在某个位置以便可以在另一个函数中进行检索？

示例：

let thedata;

fetch(URL).then(res => {
    return res.json()
}).then(data => {
    console.log(data[0].category); //helloWorld
    thedata = data[0].category 

});


console.log(thedata);

function printsomething()
{return thedata}

现在数据将是不确定的，如果没有.then()函数内部的数据，我将无法使用该功能。

这就是我的意思。

Answer 1

通过将fetch Promise链分配给一个变量，您可以从多个位置对该变量调用.then，尽管这样做有些奇怪：

const prom = fetch("someurl")
  .then(res => res.json());
prom.then((data) => {
  console.log(data);
});
// Separately:
prom.then((data) => {
  console.log(data.foo);
});

在大多数情况下，使用您原来的策略将所有内容放在.then之后的单个res.json()中会更有意义。

Answer 2

当然可以，但是您需要跟踪异步函数是否返回了值，这可以很简单地检查是否定义了值。该变量可以在全局范围内，也可以在您导入的某些对象中的字段中。但是，由于没有从then内部调用需要它的代码，这意味着在检查中包装该变量的使用，并处理尚未设置该变量的可能性。这是否一个好主意取决于上下文-如果可以，最好避免使用它，但这是我偶尔使用的一种模式。

Answer 3

无论如何处理，您都需要检查或等待该值，因此最好在.then()中使用它

虽然您可以在.then()之外使用变量，但是可以做到这一点，我认为异步/等待更干净/更容易通过等待函数直到它们以与.then相同的方式完成并确保您的变量来管理流程可用（您仍应验证）：

const someAPI = "https://jsonplaceholder.typicode.com/todos/1"
let data = null

const fetchFunc = async () =>{
  const response = await fetch(someAPI)
  data = await response.json()  
  // use data
}

const asyncFunc = async () => {
  await fetchFunc()
  console.log(data);
  //use data
}

asyncFunc()