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

Question

我是 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)
    })
}

Answer 1

In react I would normally import an action into my component then call that action which would make a call to the server

这正是您在 "Server" 为 API Gateway 的无服务器架构中所做的。 API 网关随后会将传入请求代理到您的 Lambda 函数。

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

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

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

容易得多

既然你已经习惯了 React -> Server 方式，我建议你选择 API Gateway 道路。

您可以在本 tutorial.

中查看如何通过 API 网关触发 Lambda 函数

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

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

How do I call a netlify lambda function from my React app?

lambda

function

reactjs

aws-lambda

netlify