在 Uppy 初始化中使用异步函数 Promise 返回值答案

【问题标题】：Using async function Promise return value in Uppy initialization在 Uppy 初始化中使用异步函数 Promise 返回值
【发布时间】：2022-07-22 11:32:28
【问题描述】：

我正在尝试将来自 AWS Cognito 的 JWT 令牌附加到上传组件中的 Uppy 请求。要获取令牌，我相信我需要一个异步函数：

async function getSessionToken() {
  const data = (await Auth.currentSession()).getAccessToken().getJwtToken()
  console.log(data)

  return data;
}

然后我在实际的函数组件中使用这个返回值：

export default function UppyUpload () {
  
  const data = getSessionToken();
  
  const uppy = useUppy(() => {
    return new Uppy({
      debug: true,
      autoProceed: false,
      restrictions: {
        maxNumberOfFiles: 1,
        minNumberOfFiles: 1,
        allowedFileTypes: ['video/*'],
        requiredMetaFields: ['caption'],
      }
    })
    .use(AwsS3Multipart, {
      limit: 4,
      companionUrl: 'http://localhost:3020/',
      companionHeaders: {
        'Authorization': "Bearer " + data,
        'uppy-auth-token': "Bearer " + data,
      }
    })
...

然而，UppyUpload 内部的data 会返回一个承诺，正如预期的那样。但我需要这个以某种方式解析为一个值，因为我认为 Uppy 初始化在函数渲染时需要这个值 (Authorization': "Bearer " + data)。

我不确定如何解决此问题，但我觉得这可能是一个常见问题。有推荐的方法吗？

【问题讨论】：

const data = await getSessionToken();
不是所有await 语句都必须在async 函数中吗？函数组件UppyUpload 不是异步函数吗？
对getUploadParameters 使用AwsS3 选项
使用 S3Multipart，而不是 S3。编辑原帖

标签： reactjs amazon-cognito uppy

【解决方案1】：

await应该在函数外使用

async function getSessionToken() {
      const data = await (Auth.currentSession()).getAccessToken().getJwtToken()
      console.log(data)
    
      return data;
    }

【讨论】：

那仍然会返回一个承诺，不是吗？
方法await下的方法怎么用js方法

【解决方案2】：

尝试创建自定义钩子来获取这样的令牌

const useToken = () => {

    const [token, setToken] = useState(null);
    useEffect(() => {
        const getToken = async () => {
            await Auth.currentAuthenticatedUser()
            .then(res => {
                setToken(res?.signInUserSession?.accessToken?.jwtToken)
            })
        }
        getToken();
    },[])

    return token;
}

然后为 uppy 实例创建自定义钩子

const useUppyInstance = () => {
const token = useToken();

const uppy = useUppy(() => {
    return new Uppy(write uppy options here)
    .use(AwsS3Multipart, {
        companionUrl: `${process.env.REACT_APP_BASE_API_URL}/companion`,
        companionHeaders: {
            Authorization : token
        },
    })
})


return uppy;
}

useUppy 是 uppy 的钩子，可以从 '@uppy/react'; 导入

参考：https://uppy.io/docs/react/initializing/#:~:text=The%20%40uppy/react%20package%20provides%20a%20hook%20useUppy()%20that%20can%20manage%20an%20Uppy%20instance%E2%80%99s%20lifetime%20for%20you.%20It%20will%20be%20created%20when%20your%20component%20is%20first%20rendered%2C%20and%20destroyed%20when%20your%20component%20unmounts.

【讨论】：