如何从我的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

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

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

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

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

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

由于您已经习惯了React - > Server方法，我建议您选择API Gateway之路。

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

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