[连续功能之前等待图像上传的响应

Question

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

以下是我正在调用上载函数并尝试将响应存储在上载URL中的部分，上载URL变量稍后在分派函数中用于将该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的数组，而无需初始化并推送到另一个数组。

map()

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

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()