Javascript 导出一个异步等待变量，并在其完成后将其导入另一个文件"；“等待”；在JS中

我刚开始用JS编写代码，为我的脚本创建一个网站，但我遇到了一些noob问题

我通过一个连接到fetch函数的异步等待函数更新变量。我想在另一个脚本中呈现我的变量，这样做会让人头疼

这是到目前为止我得到的，但第二个文件似乎正在导入nul变量

这是我的计算和变量声明文件：

var url = 'https://financialmodelingprep.com/api/v3/profile/'+tickersymb+'?apikey='+api
var priceStat = "Working..."
var jsonData

function checkStats(url, callback) {
    return fetch(url)
        .then((response) => { 
            return response.json().then((data) => {
                console.log(data);
                return data;
            }).catch((err) => {
                console.log(err);
            }) 
        });
}

(async () => {
    jsonData = await checkStats(url)
    priceStat = jsonData.[0].price
    exports.jsonData = jsonData
    exports.priceStat = priceStat
    exports.tickersymb = tickersymb
})();

这是我的渲染脚本：

var compute = require('components/compute-engine');

var pricestat = compute.pricestat;
var tickersymb = compute.tickersymb;
var jsonData = compute.jsonData;

export default function HeaderStats() {
  return (
    <>
      {/* Header */}
      <div className="relative bg-blue-600 md:pt-32 pb-32 pt-12">
        <div className="px-4 md:px-10 mx-auto w-full">
          <div>
            {/* Card stats */}

            <div className="flex flex-wrap">
              <div className="w-full lg:w-6/12 xl:w-3/12 px-4">
                <CardStats
                  statSubtitle=""
                  ticker= {tickersymb}
                  exchange="NASDAQ"
                  statIconName="fas fa-dollar-sign"
                  statIconColor="bg-green-500"
                />
...

var compute=require（'组件/计算引擎'）；
var pricestat=compute.pricestat；
var tickersymb=compute.tickersymb；
var jsonData=compute.jsonData；
导出默认函数HeaderStats（）{
返回(
{/*头*/}
{/*卡统计数据*/}
...

无论是跨模块还是在文件中，都无法将异步代码转换为这样的同步代码。一旦进入异步链，就永远无法将控制权恢复到同步代码，因为在异步函数有机会解析之前，所有同步调用堆栈帧都需要完成

因此，您需要导出承诺，然后在进口商代码中等待它

有几种模式可以应用，我不确定哪种模式最好，但我不想看到更大的设计背景，但我不会尝试对每个单独的变量使用承诺——如果您想将所有变量一起使用，这是没有意义的（

promise.all

可以做到这一点，但它不是一个客户友好的界面）

相反，我建议导出一个函数，或者直接导出

checkStats

，或者导出一个包装器，该包装器进行索引，以便为使用者整洁地准备数据，并返回打包到对象中的数据

似乎您的目的是只获取一次数据。如果您担心函数会在每次重新加载时不断命中API，那么一旦承诺得到解决，对

的进一步调用将等待
承诺只返回旧值，而不是重新计算它。在下面的示例代码中，我只使用一个承诺并将其存储在变量中，因此无论调用了多少次
getStats
，只调用一次
fetch

您的导入器应该在等待promise解析时提供默认值（您通常可以将它们作为单独的同步变量导出，但是为什么数据获取模块应该关心UI/视图问题？我会将其保留在导入器中）

最后，看起来您正在使用React，因此组件需要以某种效果使用此数据，而不是在组件外部的同步代码中使用。如果您只想获取一次数据，请使用
[]
作为
useffect
的第二个参数，或将数据缓存在闭包中

下面是一个玩具示例来说明：



/****嘲弄****/
const fetch=async（）=>{
console.log（“获取调用”）；
返回{
json:（）=>新承诺（解析=>
setTimeout（（）=>resolve（[{price:42}]），1000）
)
};
};
const exports={}；
const require=（）=>导出；
/****导出器文件****/
常量url=”https://www.example.com";
const checkStats=url=>
获取（url）
.then（response=>response.json（））
.catch（err=>console.error（err））
;
//兑现诺言
const stats=checkStats（url）
.then（jsonData=>（{price:jsonData[0].price}））
;
exports.getStats=（）=>stats；
/****导入文件****/
const{useState，useffect}=React；
const{getStats}=require（“/您的其他模块”）；
const HeaderStats=（）=>{
const[price，setPrice]=useState（“加载…”）；
useffect（（）=>{
getStats（）.then（data=>setPrice（data.price））；
}，[价格]；
返回（{price}）；
};
//显示即使有2个渲染，fetch也是
//仅调用一次（打开浏览器控制台）
ReactDOM.render(
[, ],
文件正文
);
您不能将异步代码转换为同步代码。这些导出也必须是承诺，导入者必须等待它们。感谢您的响应！我如何让导入者等待？导出承诺本身或返回承诺的函数。然后使用
wait
或
等待承诺（或返回的承诺）。然后（）