如何将API Gateway SDK添加到React？

Donna 发表于 Dev

唐娜

我正在尝试将API Gateway SDK添加到React代码中，但是我是ES6和React的新手，因此很难找到一种方法

这是我的React项目结构：

myReactProject
- node_modules
- src
-- components
---- ApigClient
------ lib (AWS APIGateway JS files) 
------ apigClient.js
------ ApigValidation.js
---- otherComponents..
---- index.js
-- containers
---- App
------ App.js
------ App.scss
---- Home
------ Home.js
------ Home.scss
---- OtherContainerFiles
---- index.js
-- redux
-- utils
---- validation.js
-- client.js
-- config.js
-- routes.js
-- server.js

我试图以两种方式导入API Gateway SDK：

1）

import ApigClient from './ApigClient';
import apiGatewayClient from './lib/apiGatewayCore/apiGatewayClient'
import sigV4ClientConfig from './lib/apiGatewayCore/sigV4ClientConfig'
import simpleHttpClientConfig from './lib/apiGatewayCore/simpleHttpClientConfig'
import utils from './lib/apiGatewayCore/utils'
import enc-base64 from './lib/CryptoJS/component/enc-base64'
import hmac from './lib/CryptoJS/component/hmac'
import hmac-sha256 from './lib/CryptoJS/rollups/hmac-sha256'
import sha256 from './lib/CryptoJS/rollups/sha256'
import axios from './lib/axios/dist/axios.standalone'
import url-template from './lib/url-template/url-template'

2）

class ApigValidation extends Component {
  render() {
    return (
      <div>
        <h1>Hello</h1>
        <script type="text/javascript" src="./lib/axios/dist/axios.standalone.js"></script>
        <script type="text/javascript" src="./lib/CryptoJS/rollups/hmac-sha256.js"></script>
        <script type="text/javascript" src="./lib/CryptoJS/rollups/sha256.js"></script>
        <script type="text/javascript" src="./lib/CryptoJS/components/hmac.js"></script>
        <script type="text/javascript" src="./lib/CryptoJS/components/enc-base64.js"></script>
        <script type="text/javascript" src="./lib/url-template/url-template.js"></script>
        <script type="text/javascript" src="./lib/apiGatewayCore/sigV4Client.js"></script>
        <script type="text/javascript" src="./lib/apiGatewayCore/apiGatewayClient.js"></script>
        <script type="text/javascript" src="./lib/apiGatewayCore/simpleHttpClient.js"></script>
        <script type="text/javascript" src="./lib/apiGatewayCore/utils.js"></script>
        <script type="text/javascript" src="apigClient.js"></script>

        <script type="text/javascript">
          var apigClient = apigCleint.newClient({
            apiKey: 'This-is-my-api-key'
          });
          apigClient.myFuncGet(params, null)
            .then(function(response) {
              console.log(JSON.stringify(response));
            }).catch(function(resuponse) {
              console.log(JSON.stringify(response));
            });
        </script>
      </div>
    );
  }
}

1）文件夹结构正确吗？我应该将SDK放入Utils吗？

2）如何在react中导入/加载/添加JS SDK并启用get / post功能？

请指教，真诚感谢！

市场托马斯

React不会对您如何进行http / async数据获取或如何构建项目做出任何决定。因此，就“正确”的方式而言，有很多。在Redux上查看Flux的流行和众所周知的实现/变体。

通常，您可以做两件事之一来将SDK或任何形式的外部代码添加到您的React应用程序中。

使用捆绑程序：Webpack，rollup.js，browserify或其他工具将以这样的方式输出代码，即可以从需要它的模块中访问所需的SDK。
将其包含在script标签中：如果您正在浏览器中运行所有内容，并且由于某种原因不想捆绑所有内容，则需要在React之前将文件包含在HTML中，以便可以访问全局模块）可以从任何SDK中获取。

例如：

<script src="copy_of_sdk_from_CDN"></script>
<script src="copy_of_react_from_CDN"></script>
<script src="other_app_code"></script>
<script src="other_app_code"></script>

你只需要做到这一点，如果你不使用的WebPack或其他捆绑。这些捆绑程序应为您提供一个文件，该文件按照您使用require或import（如果您使用的是ES6模块）指定的依赖项，以正确的顺序包含所有内容。

这些几乎是将SDK“放入”项目的唯一方法。您几乎可以将其从远程位置拉入或下载并以这种方式使用（la npm）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。