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

Question

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

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()函数返回一个promise。关于承诺的一个有趣的事实是，虽然它们只能解析一次，但解析后的值可以被访问和使用很多次。

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

使用await解析承诺值，相当于…

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

---

我想指出这一点关于fetch-api…你应该总是检查响应。好的地产

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();
};