使用 lambda 发送 html 文件会产生语法错误，但只是有时答案

【问题标题】：Using lambda to send html files is producing syntax errors but only sometimes使用 lambda 发送 html 文件会产生语法错误，但只是有时
【发布时间】：2019-07-29 16:27:46
【问题描述】：

编辑：所以当我注意到在网络中只有当我的 .ico 图像未发送时页面才会加载时，我正在搞乱开发工具，也许这有问题。

我对使用 react 有点陌生，对使用 Lambda / API 网关和所有这些都非常陌生。我遇到了一个问题，有时我的网站会出现语法错误，例如：

语法错误：在 .运营商

或

语法错误：在 : 运算符之后缺少名称

但如果我继续刷新它可能会出现另一个错误，或者网站将加载。有时它不会加载 css，或者其他时候不能正确加载。最多可能需要 2-3 次刷新才能使网站达到完整状态。

是的，我不使用 API 网关为我处理这一切是有正当理由的。

有什么想法吗？

代码有点乱，但应该是可读的。

我什至不确定从哪里开始调试这样的东西。 lambda 函数所做的只是打开 s3 存储桶，获取已编译的做出反应的 css/js 文件并将其发送给发出请求的人。


if(event.path === '/')
  {
    let bucket = process.env.CODE_S3_BUCKET;
    let key = path.join(process.env.ADDITIONAL_ARTIFACTS_S3_PATH, 'index.html');

    let dataBody; 

    var params = {
      Bucket: bucket,
      Key: key
    };

    return s3.getObject(params, (err, data) => {
      if (err) {
        console.error('Error getting object: ' + bucket + ':' + key);
      } else {

        dataBody = data.Body.toString();

        callback(null, {
          statusCode: 200,
          isBase64Encoded: false,
          body: dataBody,
          headers: {
            'Content-Type': 'text/html'
          }
        });
      }
    }).promise();
  }
  else
  {

    let bucket = process.env.CODE_S3_BUCKET;
    let key = path.join(process.env.ADDITIONAL_ARTIFACTS_S3_PATH, event.path);

    let mimeType = mime.lookup(key);

    let dataBody; 

    var params = {
      Bucket: bucket,
      Key: key
    };


// Checks if its in the included file types

    if(textMimes.includes(mimeType))
    {

      return s3.getObject(params, (err, data) => {
        if (err) {
          console.error('Error getting object: ' + bucket + ':' + key);
        } else {

          dataBody = data.Body;

          callback(null, {
            statusCode: 200,
            isBase64Encoded: false,
            body: dataBody.toString(),
            headers: {
              'Content-Type': mimeType
            }
          });
        }
      }).promise();

    } else {

      return s3.getObject(params, (err, data) => {
        if (err) {
          console.error('Error getting object: ' + bucket + ':' + key);
        } else {

          dataBody = data.Body;

          callback(null, {
            statusCode: 200,
            isBase64Encoded: true,
            body: dataBody.toString('base64'),
            headers: {
              'Content-Type': mimeType
            }
          });
        }
      }).promise();

    }

【问题讨论】：

是的，就像我说的那样，我对其中的大部分内容都很陌生，并且在将一些东西放入单独的函数时遇到了一些问题。它只是测试代码，计划在以后修复所有这些代码重复和东西。编辑：回复评论说很多代码重复^.^
想回来回答这个问题；它是如何修复的，但处理回调的方式存在问题。我所做的只是让它使用了不同的回调格式（我认为我使用了另一种回调形式而不是 .promise）。我不是 javascript 专家，所以我无法评论这是什么原因。

标签： javascript reactjs lambda

【解决方案1】：

不是一个答案，但也许这个版本会让你更容易思考重要的部分，而不是专注于重复：

const is_at_root = event.path === '/';
const s3_params = {
        Bucket: process.env.CODE_S3_BUCKET,
        Key: path.join(process.env.ADDITIONAL_ARTIFACTS_S3_PATH, is_at_root ? event.path : 'index.html')
    };
const mime_type = mime.lookup(key);
const requires_base64 = textMimes.includes(mime_type);
const callback_params = {
    statusCode: 200,
    isBase64Encoded: requires_base64,
    body: requires_base64 ? data.Body.toString('base64') : data.Body.toString(),
    headers: {
        'Content-Type': requires_base64 ? mime_type : 'text/html'
    }
}

return s3.getObject(s3_params, (err, data) => {
    if (err) {
        console.error('Error getting object: ' + s3_params.Bucket + ':' + s3_params.Key);
    } else {
        callback(null, callback_params);
    }
}).promise();

【讨论】：