在继续功能之前等待图像上传的响应

Question

因此，我正在为数组中的多个图像开发上传功能。经过很多努力之后，我终于可以使用上传功能了，并且图像显示在Firebase数据库中。但是，我还没有找到一种可行的方法来确保我的上传功能完成后再继续。

下面是我正在调用上载函数并尝试将响应存储在uploadurl中的部分，稍后在调度函数中使用uploadurl变量将url与其他数据一起存储。

   try {
            uploadurl = await uploadImages()
            address = await getAddress(selectedLocation)
            console.log(uploadurl)
            if (!uploadurl.lenght) {
                Alert.alert('Upload error', 'Something went wrong uploading the photo, plase try again', [
                    { text: 'Okay' }
                ]);
                setIsLoading(true);
                return;
            }

            dispatch(

因此图像上传功能在下面。这样做的目的是要上传图像，但是无法正确启动.then调用以获取DownloadURL，并且.then图像也无法正常工作。

uploadImages = () => {
    const provider = firebase.database().ref(`providers/${uid}`);
    let imagesArray = [];
    try {
        Promise.all(photos)
            .then(photoarray => {
                console.log('all responses are resolved succesfully')
                for (let photo of photoarray) {
                    let file = photo.data;
                    const path = "Img_" + uuid.v4();
                    const ref = firebase
                        .storage()
                        .ref(`/${uid}/${path}`);
                    var metadata = {
                        contentType: 'image/jpeg',
                    };
                    ref.putString(file, 'base64', metadata).then(() => {
                        ref
                            .getDownloadURL()
                            .then(images => {
                                imagesArray.push({
                                    uri: images
                                });
                                console.log("Out-imgArray", imagesArray);

                            })
                    })
                };
                return imagesArray
            })
    } catch (e) {
        console.error(e);
    }
};

所以我想返回imagesArray之后，所有照片都上传了。那么在第一个函数中将imagesArray设置为uploadURL吗？在imagesArray中设置所有图像URL并将其传递给uploadURL之后，只有这样，我的用于上载其余数据的调度函数才应该继续。我如何确保这种情况按预期发生？

我已经改变了很多次，因为我不断地以不同的方式发送信息，这让我完全茫然如何继续:(

Answer 1

您的大多数uploadImages()代码都是正确的，但是在许多地方，您并未从每个异步操作中返回承诺。

捷径：处理许多承诺

在处理基于数组的大量异步任务时，建议将数组map()设置为Promises数组，而不要使用for循环。这样一来，您就可以构建一个可将Promise.all（）送入Promise的数组，而无需初始化并推送到另一个数组。

let arrayOfPromises = someArray.map((entry) => {
    // do something with 'entry'
    return somePromiseRelatedToEntry();
  });

Promise.all(arrayOfPromises)
  .then((resultsOfPromises) => {
    console.log('All promises resolved successfully');
  })
  .catch((err) => {
    // an error in one of the promises occurred
    console.error(err);
  })

如果任何包含的承诺失败，以上代码段将失败。要静默忽略单个错误或推迟它们处理，您只需在映射数组步骤中添加一个catch()。

let arrayOfPromises = someArray.map((entry) => {
    // do something with 'entry'
    return somePromiseRelatedToEntry()
      .catch(err => ({hasError: true, error: err})); // silently ignore errors for processing later
  });

更新后的uploadImages()代码

通过这些更改更新代码，将得到以下结果：

uploadImages = () => {
    const provider = firebase.database().ref(`providers/${uid}`);
    // CHANGED: removed 'let imagesArray = [];', no longer needed

    return Promise.all(photos) // CHANGED: return the promise chain
        .then(photoarray => {
            console.log('all responses are resolved successfully');
            // take each photo, upload it and then return it's download URL
            return Promise.all(photoarray.map((photo) => { // CHANGED: used Promise.all(someArray.map(...)) idiom
              let file = photo.data;
              const path = "Img_" + uuid.v4();
              const storageRef = firebase // CHANGED: renamed 'ref' to 'storageRef'
                    .storage()
                    .ref(`/${uid}/${path}`);
              let metadata = {
                  contentType: 'image/jpeg',
              };

              // upload current photo and get it's download URL
              return storageRef.putString(file, 'base64', metadata) // CHANGED: return the promise chain
                .then(() => {
                  console.log(`${path} was uploaded successfully.`);
                  return storageRef.getDownloadURL() // CHANGED: return the promise chain
                    .then(fileUrl => ({uri: fileUrl}));
                });
            }));
        })
        .then((imagesArray) => {                       // These lines can
          console.log("Out-imgArray: ", imagesArray)   // safely be removed.
          return imagesArray;                          // They are just
        })                                             // for logging.
        .catch((err) => {
          console.error(err);
        });
};