在函数外使用获取的 API 数据

Question

为了让我的代码更简洁，我想在几个不同的函数中使用获取的 API 数据，而不是一个大的。尽管我确实设法在其他函数中引用了该数据，但问题是 API im 每次调用时都会抛出不同的随机结果。因此 userData() 的输出不等于 userData2() 的输出，即使我的意图不同并且我希望 result 变量内容在函数之间相同。

const getData = () =>
  fetch("https://opentdb.com/api.php?amount=10").then((response) =>
    response.json()
  );

const useData = async () => {
  const result = await getData();
  console.log(result);
};

const useData2 = async () => {
  const result = await getData();
  console.log(result);
};

Answer 1

你的getData()函数returns一个承诺。关于 promises 的一个有趣事实是，虽然它们只能 resolve 一次，但可以根据需要多次访问和使用已解析的值。

const dataPromise = getData();

const useData = async () => {
  const result = await dataPromise;
  console.log(result);
};

const useData2 = async () => {
  const result = await dataPromise;
  console.log(result);
};

使用await解析promise值，相当于...

dataPromise.then((result) => {
  console.log(result);
});
// or `dataPromise.then(console.log)` if you like brevity

我想指出关于 fetch-api... you should always check the Response.ok 属性

const getData = async () => {
  const res = await fetch("https://opentdb.com/api.php?amount=10");
  if (!res.ok) {
    throw new Error(`${res.status}: ${await res.text()}`);
  }
  return res.json();
};

在函数外使用获取的 API 数据

Use fetched API data outside of the function

javascript

fetch-api