如何添加API网关SDK以作出反应？

Question

我正在尝试添加来响应代码，但是我对ES6并不熟悉，所以很难找到一种方法

这是我的反应项目结构：

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网关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)如何在function中导入/加载/添加JS并启用get/post功能？

敬请指教，衷心感谢！

Answer 1

React不会对您如何进行http/异步数据获取或如何构造项目做出任何决定。因此，就“正确”的方式而言，有很多。看看剩馀的流行和众所周知的实现/变化的通量。

通常，您可以做两件事中的一件事，将SDK或任何类型的外部代码放入您的React应用程序中。

1. 使用一个绑定程序：Webpack、rollup.js、browserify或其他工具将输出代码，这样您所需的SDK就可以从模块中访问它。
2. 将其包含在脚本标记中:如果您正在运行浏览器中的所有内容，并且不想因为任何原因将所有内容捆绑在一起，那么您需要在作出反应之前将文件包含在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)。