如何添加 API Gateway SDK 到 React？

Question

我正在尝试将 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) import/load/add JS SDK 如何在 React 中启用 get/post 功能？

请指教，不胜感激！

Answer 1

React 不会对您如何进行 http/async 数据获取或如何构建项目做出任何决定。因此，就 "correct" 种方式而言，有多种。查看 Redux 了解 Flux 的流行和知名度 implementation/variation。

一般来说，您可以执行以下两项操作之一来将 SDK 或任何类型的外部代码添加到您的 React 应用程序中。

使用打包器：Webpack、rollup.js、browserify 或其他工具将以您需要的 SDK 的方式输出代码可从模块访问需要它。
将其包含在脚本标记中：如果您运行浏览器中的所有内容并且不想将所有内容捆绑在一起原因，您需要在 HTML 之前将文件包含在 React 中，这样您就可以访问从任何 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 "get" 添加到项目中的唯一方法。您几乎可以从远程位置将其拉入或下载并以这种方式使用它（la npm）。

如何添加 API Gateway SDK 到 React？

How to add API Gateway SDK to React?

javascript

reactive-programming

amazon-web-services

reactjs

aws-api-gateway