React 应用中如何优化 S3 文件列表和元数据获取？

javascript

2024-03-07 12:13:34

React应用中优化S3文件列表和元数据获取

问题分析

在构建React应用时，我们可能会遇到一个常见问题，即在从S3获取文件列表后，还需要检索每个文件的用户定义元数据。但是，使用传统的异步回调方法会导致延迟和过时的列表显示。

解决之道

为了解决这一问题，我们可以采取以下步骤：

使用Promise.all

为了确保在更新listFiles状态之前所有headObject调用都已完成，我们可以使用Promise.all。这将创建一个Promise，等待所有子Promise完成。

正确更新状态

在getUserMetaData函数中，我们需要使用setListFiles函数来更新listFiles状态，而不是直接返回修改后的数组。

减少HTTP调用

在listObjectsV2调用中，我们可以使用Delimiter参数仅检索文件的键和大小。这可以减少对每个文件的重复headObject调用。

代码优化

import React, { useState, useEffect } from "react";
import AWS from "aws-sdk";

function App() {

  const s3 = new AWS.S3({
    credentials: {
      accessKeyId: process.env.REACT_APP_AWS_ACCESS_KEY_ID,
      secretAccessKey: process.env.REACT_APP_AWS_SECRET_ACCESS_KEY,
      region: process.env.REACT_APP_AWS_REGION,
    },
  });

  const params = {
    Bucket: "abc",
    Delimiter: "/",
  };

  const [listFiles, setListFiles] = useState([]);

  useEffect(() => {
    s3.listObjectsV2(params, (err, data) => {
      if (err) {
        console.log(err, err.stack);
      } else {
        Promise.all(
          data.Contents.map((aFile) =>
            new Promise((resolve, reject) => {
              const headParams = {
                Bucket: "abc",
                Key: aFile.Key,
              };

              s3.headObject(headParams, (err1, data1) => {
                if (err1) {
                  reject(err1);
                } else {
                  aFile.user_metadata_1 = data1.Metadata["user_metadata_1"];
                  resolve();
                }
              });
            })
          )
        )
          .then(() => setListFiles(data.Contents))
          .catch((err) => console.log(err));
      }
    });
  }, []);

  return (
    <>
      <div className="App">
        <table>
          <tr>
            <th>user_metadata_1</th>
            <th>Document Name</th>
            <th>Size</th>
          </tr>

          {listFiles &&
            listFiles.map((name, index) => {
              return (
                <tr key={index}>
                  <td>{name.user_metadata_1}</td>
                  <td>{name.Key}</td>
                  <td>{name.Size}</td>
                </tr>
              );
            })}
        </table>
      </div>
    </>
  );
}

export default App;