从无服务器函数调用 API

[asikurrahmanshuvo]

设置完函数后，我们可以ntl dev在控制台中运行开发服务器并测试该函数。在浏览器中打开，打开开发者控制台，然后导航到网络面板。

Chrome 浏览器的开发工具中显示网络面板，上面正在运行页面

当您单击获取按钮时，您将看到呼叫hello-world进入网络面板。

hello-world 的网络请求

您可以看到200状态，如果您单击该函数并导航到“预览”选项卡，您可以看到“Hello World！”的对象消息。

预览面板显示信息：“Hello World！”

您可能会注意到文本正在打印[object Object]，这是因为我们需 哈萨克斯坦whatsapp数据 要在事件侦听器函数中将响应字符串化fetchBtn。添加JSON.stringify(response)方法并保存文件。

如果您重新加载网站并再次单击“获取”按钮，则消息现在将正确显示。

“消息”：“Hello World！”显示在浏览器页面上

外部 API 可以与无服务器函数集成以获取数据，然后可以在响应中使用这些数据。我们将使用Poke API，它允许您获取有关 Pokémon 世界的各种信息。

创建新端点
回到代码编辑器，我们需要在netlify/functions目录中创建一个名为的新文件pokedex.js，该文件将用于存放我们的新端点。这次，为POKE_APIurl创建一个常量，等待对 url 的 fetch 调用，然后创建一个新常量，data并等待。接下来，我们将返回statusCode: 200,并在正文中将数据响应字符串化。

获取 Pokédex 端点
回到index.html文件，首先我们需要添加一个新按钮来获取pokedex.js我们刚刚创建的端点。向标记添加一个新按钮，带有 idfetch-pokedex-btn和文本 Fetch Pokedex。