如何从我的 React 应用程序调用 netlify lambda 函数？答案

【问题标题】：How do I call a netlify lambda function from my React app?如何从我的 React 应用程序调用 netlify lambda 函数？
【发布时间】：2019-03-22 03:57:28
【问题描述】：

我是 netlify 和无服务器架构的新手。在反应中，我通常会将一个动作导入到我的组件中，然后调用该动作来调用服务器。现在我只是想在本地测试我的函数，我不确定从哪里导入或如何准确地调用我的函数以查看它是否有效。帮助将不胜感激。下面是我试图调用的一个非常基本的函数。

//in functions/test.js

import axios from 'axios'

exports.handler = function(event, context, callback) {
    axios.post('http://requestbin.fullcontact.com/1c50pcg1', {name: 'richard'}).then((response)=>{
      callback(null, {
        statusCode: 200,
        body: response.body
      })
    }).catch((err) => {
      console.log(err)
    })
}

【问题讨论】：

标签： reactjs function lambda aws-lambda netlify

【解决方案1】：

在反应中，我通常会将一个动作导入到我的组件中，然后调用该动作来调用服务器

这正是您在“服务器”为API Gateway 的无服务器架构中所做的事情。然后 API Gateway 会将传入请求代理到您的 Lambda 函数。

您可以定义 HTTP 特定方法来调用您的 Lambda 函数，也可以配置 API Gateway 以将任何 HTTP 方法代理给它们。然后需要您自己处理路由。幸运的是，有一些包允许您在 Lambda 函数前面包装 Web 框架（如 Express），因此您的路由可以由这些类型的框架处理。

另一种选择是使用 JavaScript SDK 调用您的函数，并使用其名称直接从浏览器调用您的 Lambda。但是，这种方法不像您严重依赖函数名称/ARN 来调用它那样灵活，这意味着函数名称或 ARN 的任何更改（例如，考虑到您正在迁移到 prod 环境）都会直接影响您的客户。 Lambda 代码的更改也可能意味着客户需要更改其实现，这绝对不是一个好习惯。另一个缺点是，以这种方式处理操作要困难得多，因为单击按钮将决定调用什么 Lambda 函数。您的前端可能会很快变得混乱。当然，在某些用例中，您更喜欢这种方法而不是 API 网关，但这需要考虑清楚。

另一方面，通过使用 API Gateway，您只需进行常规 REST 调用，然后触发您的 Lambda 函数。 Lambda 函数的任何更改都不会影响客户端与您的 REST API 之间的合同，因此它最终变得更加灵活。此外，依赖 HTTP 方法比依赖函数名称/ARN 容易得多

由于你已经习惯了 React -> Server 的方式，我推荐你选择 API Gateway 的方式。

您可以在tutorial 中了解如何通过 API 网关触发 Lambda 函数。

如果您想从浏览器调用 Lambda 函数，那么这个tutorial 可能会很方便。

【讨论】：

完美！谢谢你的解释