时间戳

首页 > 解决方案 > 我有一个函数，我想在任务完成后返回多个对象（反应原生）

reactjs - 我有一个函数，我想在任务完成后返回多个对象（反应原生）

问题描述

export const Upload = async(image) => {
    const filename = `patient/${firebase.auth().currentUser.uid}/${Math.random().toString(36)}`;
    const response = await fetch(image);
    const blob = await response.blob();
    const task = firebase.storage().ref().child(filename).put(blob);
    // set progress state
    const taskProgres = (snapshot) => {
      console.log(Math.round(snapshot.bytesTransferred / snapshot.totalBytes) * 10000);
    };

    const taskComplet = () => {
       task.snapshot.ref.getDownloadURL().then((snapshot) => {
        return(snapshot)
      });
    };
    const taskError = (snapshot) => {
      console.log(snapshot);
    };

    task.on("state_changed", taskProgres, taskError, taskComplet);
  };

调用此函数时，我希望它在 taskProgres 完成以及 taskComplet 完成时返回是可以通过的以及如何调用它

标签： reactjsfirebasereact-nativefirebase-storage

解决方案

如果我理解正确，您希望函数在上传完成后返回。

在这种情况下，考虑返回task自身，这是一个在上传完成时解决的承诺。

如果你想返回下载 URL，你可以这样做：

  export const Upload = async(image) => {
    const filename = `patient/${firebase.auth().currentUser.uid}/${Math.random().toString(36)}`;
    const response = await fetch(image);
    const blob = await response.blob();
    const task = firebase.storage().ref().child(filename).put(blob);

    await task;

    const downloadUrl = await task.snapshot.ref.getDownloadURL()

    return downloadUrl;
  };

如果你想在调用函数中处理进度，并让它返回生成的下载 URL，你需要传入一个回调，因为你不能返回两个不同时间到达的结果。

看起来像这样：

  export const Upload = async(image, progressCallback) => {
    const filename = `patient/${firebase.auth().currentUser.uid}/${Math.random().toString(36)}`;
    const response = await fetch(image);
    const blob = await response.blob();
    const task = firebase.storage().ref().child(filename).put(blob);
    task.on("state_changed", progressCallback);
    await task;

    const downloadUrl = await task.snapshot.ref.getDownloadURL()

    return downloadUrl;
  };

然后你会这样称呼它：

const downloadURL = await Upload(imageURL, (taskSnapshot) => {
  console.log(Math.round(taskSnapshot.bytesTransferred / taskSnapshot.totalBytes) * 10000)
});
console.log(downloadURL);

推荐阅读