javascript - 仅 js - 仅运行一次函数

Question

我正在从 Firebase 获取一些数据，并且希望在第一页加载时仅运行一次 async/await 函数(以获取数据)。我习惯了 React 和生命周期方法/钩子(Hook)来做这件事，但是这个小项目太小了，无法使用 React。我只需要运行此函数一次，获取数据，将其保存到变量中，并且不再在同一 session 中进一步调用 firebase api。

async function getEntries() {
  const snapshot = await firebase.firestore().collection('riders').get()
  // Do my thing with the data, etc.
  // console.log(snapshot.docs.map(doc => doc.data()));
}

是否有任何仅 js 的方法可以在页面加载时仅运行此函数一次？

Answer 1

如果你只调用一个函数一次，为什么还需要这个函数？

const snapshot = await firebase.firestore().collection('riders').get()
// Do my thing with the data, etc.
// console.log(snapshot.docs.map(doc => doc.data()));

此顶级等待仅适用于模块，并且它会阻止所有依赖模块的加载。如果没有必要(它们不依赖于数据)，或者如果您不想编写模块，则可以将代码包装在异步 IIFE 中，并将返回的 Promise 存储在变量中:

 const dataPromise =  (async function() {
   //...
   return data;
 })();

加载数据时，您可能希望显示一些加载图标等。这可以通过以下钩子(Hook)轻松完成:

 function usePromise(p) {
   const [state, setState] = useState(null);
   useEffect(() => { p.then(setState); }, []);
   return state;
 }

// Inside a component:
const data = usePromise(dataPromise);
if(data === null)
  return <Loading />;

// show data