现在我有三个代码块,分别都调用了同一个接口使用相同的数据,请问怎么精简代码,让他只调用一次接口,将数据存储起来让其他函数共同使用.-编程知识

问题描述:

现在我有三个代码块:
一: const getData = async () => {console.log('触发了getData接口')let resultData = await getActivityInfo(activityId);console.log(resultData,'resultData')let id = resultData.id;let shareImg = resultData.shareImglet shareSubtitle = resultData.shareSubtitlelet shareTitle = resultData.shareTitleconsole.log(id,shareImg,shareSubtitle,shareTitle,'-')return {id,shareImg,shareSubtitle,shareTitle}
}
二: // 测试函数
const getDataAndLog = async () => {const {id, shareImg, shareSubtitle, shareTitle} = await getData();console.log(id, shareImg, shareSubtitle, shareTitle, '?-');var htmlCode = `<div style="display:none" id="__cxnewsapp_topbar">分享按钮是否显示的标志</div><div style="display:none" id="__cxnewsapp_orientation">flexible</div><div style="display:none" id="__cxnewsapp_sharetext">${shareSubtitle}</div><div style="display:none" id="__cxnewsapp_sharephotourl">${shareImg}</div><div style="display:none" id="__cxnewsapp_sharewxurl"></div><div style="display:none" id="__cxnewsapp_sharewxthumburl"></div><div style="display:none" id="__cxnewsapp_sharewxtitle">${shareTitle}</div><div style="display:none" id="__cxnewsapp_sharewxtext">${shareSubtitle}</div>`;var range = document.createRange(); // 创建一个新的Range对象range.selectNode(document.body); // 将Range对象选中整个<body>节点var fragment = range.createContextualFragment(htmlCode); // 将HTML代码转换成DOM节点对象document.documentElement.appendChild(fragment); // 将DOM节点对象添加到<body>节点的底部}getDataAndLog();三: // 分享按钮
const shareDialog = async () => {console.log('点击了分享按钮')if (isInGenerated()) {// 注释登录判断 不登陆也可以分享// if (!checkLogin()) {//   login()//   return// }// 判断是不是财新appif (getCookie('appType')) {const res = await getData()const {id,shareImg,shareSubtitle,shareTitle} = resconsole.log(id,shareImg,shareSubtitle,shareTitle,'id,shareImg,shareSubtitle,shareTitle')
这三个代码块调用了两次getActivityInfo(activityId);这个接口,重复调用了,怎么简化代码

我希望实现的思路:

let id,shareImg,shareSubtitle,shareTitle;
const getData = async () => {console.log('触发了getData接口')let resultData = await getActivityInfo(activityId);console.log(resultData,'resultData')id = resultData.id;shareImg = resultData.shareImgshareSubtitle = resultData.shareSubtitleshareTitle = resultData.shareTitleconsole.log(id,shareImg,shareSubtitle,shareTitle,'-')return {id,shareImg,shareSubtitle,shareTitle}
}
getData()// 测试函数
const getDataAndLog = () => {console.log(id, shareImg, shareSubtitle, shareTitle, '?-');var htmlCode = `<div style="display:none" id="__cxnewsapp_topbar">分享按钮是否显示的标志</div><div style="display:none" id="__cxnewsapp_orientation">flexible</div><div style="display:none" id="__cxnewsapp_sharetext">${shareSubtitle}</div><div style="display:none" id="__cxnewsapp_sharephotourl">${shareImg}</div><div style="display:none" id="__cxnewsapp_sharewxurl"></div><div style="display:none" id="__cxnewsapp_sharewxthumburl"></div><div style="display:none" id="__cxnewsapp_sharewxtitle">${shareTitle}</div><div style="display:none" id="__cxnewsapp_sharewxtext">${shareSubtitle}</div>`;var range = document.createRange(); // 创建一个新的Range对象range.selectNode(document.body); // 将Range对象选中整个<body>节点var fragment = range.createContextualFragment(htmlCode); // 将HTML代码转换成DOM节点对象document.documentElement.appendChild(fragment); // 将DOM节点对象添加到<body>节点的底部}我现在希望实现:在最外层定义id,shareImg,shareSubtitle,shareTitle;然后通过getData函数获取到这几个值,后面的getDataAndLog函数可以直接用最外层的id,shareImg,shareSubtitle,shareTitle值,而不需要再次通过异步调用接口去获取,怎么写?

GPT回答:

要实现在最外层定义变量并在getData函数中获取其值，然后在getDataAndLog函数中使用这些值，您可以将getData函数返回的数据存储在全局变量中。这样，在getDataAndLog函数中就可以直接使用这些全局变量的值，而无需再次调用异步接口获取数据。以下是修改后的代码示例：let id, shareImg, shareSubtitle, shareTitle;const getData = async () =&gt {console.log('触发了getData接口');let resultData = await getActivityInfo(activityId);console.log(resultData, 'resultData');id = resultData.id;shareImg = resultData.shareImg;shareSubtitle = resultData.shareSubtitle;shareTitle = resultData.shareTitle;console.log(id, shareImg, shareSubtitle, shareTitle, '-');return { id, shareImg, shareSubtitle, shareTitle };
};async function init() {await getData();getDataAndLog();
}init();// 测试函数
const getDataAndLog = () =&gt {console.log(id, shareImg, shareSubtitle, shareTitle, '?-');var htmlCode = `&ltdiv style="display:none" id="__cxnewsapp_topbar"&gt分享按钮是否显示的标志&lt/div&gt&ltdiv style="display:none" id="__cxnewsapp_orientation"&gtflexible&lt/div&gt&ltdiv style="display:none" id="__cxnewsapp_sharetext"&gt${shareSubtitle}&lt/div&gt&ltdiv style="display:none" id="__cxnewsapp_sharephotourl"&gt${shareImg}&lt/div&gt&ltdiv style="display:none" id="__cxnewsapp_sharewxurl"&gt&lt/div&gt&ltdiv style="display:none" id="__cxnewsapp_sharewxthumburl"&gt&lt/div&gt&ltdiv style="display:none" id="__cxnewsapp_sharewxtitle"&gt${shareTitle}&lt/div&gt&ltdiv style="display:none" id="__cxnewsapp_sharewxtext"&gt${shareSubtitle}&lt/div&gt`;var range = document.createRange(); // 创建一个新的Range对象range.selectNode(document.body); // 将Range对象选中整个&ltbody&gt节点var fragment = range.createContextualFragment(htmlCode); // 将HTML代码转换成DOM节点对象document.documentElement.appendChild(fragment); // 将DOM节点对象添加到&ltbody&gt节点的底部
};在上述代码中，我们创建了一个名为`init`的新函数。在该函数中，我们首先调用`await getData()`来获取数据并将其存储在全局变量中，然后再调用`getDataAndLog()`函数来使用这些全局变量的值。最后，我们在全局作用域中调用`init()`函数来执行这些操作。请注意，在使用全局变量时应小心，确保在正确的时机获取数据并避免出现竞态条件或不一致的情况。

接下来的疑问: