地图中存在瓶颈的async等待地理编码api调用

Question

我在gatsby中使用每秒有10个请求的地理编码api，我在develop期间创建页面，在map函数中我调用地理编码api从地址获取lat、lon，并将其传递给每页的context

但我达到了每秒10个请求的api限制，尝试在这里输入链接描述

但我认为我做得不对，因为页面创建失败了"gatsby-node.js" threw an error while running the createPages lifecycle:

const getAllData = async () =>
Promise.all(
//data from graphql 
data.map(async (node) => {
//googleapi function send fetch request to  api  
const geo = await limiter.schedule(() => googleapi({ address }));
results = await anotherapi_base_on_res(res.latitude, res.longitude);
return {
path: `/${slug}`,
component: require.resolve(`./src/templates/abc.js`),
context: {
slug: node.url,
},
};
})
);
const dataResult = await getAllData();

页面没有被创建，这是使用瓶颈的正确方式吗

Answer 1

当您在运行时运行gatsby develop或gatsby build命令一次时，就会创建页面。恐怕这种方法永远不会像现在这样奏效

关于createPageAPI的更多详细信息：

动态创建页面此扩展点仅在初始来源和节点的转换以及GraphQL模式是完整的，因此您可以查询数据以便创建页面

---

我想将经度和纬度传递给上下文

有很多实现细节缺乏，但我想我明白你想要做的。我认为你的代码应该看起来像：

const path = require("path");
exports.createPages = async ({ graphql, actions, reporter }) => {
const { createPage } = actions;
// somewhere you are getting the data in a GraphQL query
data.forEach(node=> {
const geo = await limiter.schedule(() => googleapi({ address }));
const { latitude, longitude } = someFancyFunction(res.latitude, res.longitude)
createPage({
path: `/${slug}`,
component: require.resolve(`./src/templates/abc.js`),
context: {
slug: node.url,
latitude, 
longitude
},
});
});
};

const someFancyFunction = async () => {
return await anotherapi_base_on_res(res.latitude, res.longitude);
}

一旦您获得数据(我假设是GraphQL查询(，我们的想法是循环使用它，但使用forEach，而不是map，因为您不想返回数组，您只想为每个节点使用createPage，正如Gatsby文档所指出的。

但是，使用forEach将无法使用async修饰符，因此您需要更改变通方法/方法，以便使用所需数据(someFancyFunction(从外部调用async函数，假设它返回latitude和longitude变量(相应地调整它(。之后，可以通过上下文将数据传递到模板中。

另一种解决方法是循环获取forEach之前的坐标(如果需要，使用asyncmap或for..of等(以设置坐标数组，然后可以将该数据提供给相应位置的模板。