React native 处理从React本机应用程序异步保存到后端服务器和云存储的更好方法

在我的React Native 0.63.2应用程序中，用户上传艺术品图像后，该应用程序将执行两项操作：

1. save artwork record and image records on backend server
2. save the images into cloud storage

这两件事是相关的，必须一起成功完成。代码如下：

const clickSave = async () => {
    console.log("save art work");
    try {
        //save artwork to backend server
        let art_obj = {
            _device_id,
            name,
            description,
            tag: (tagSelected.map((it) => it.name)),
            note:'',
        }; 
        let img_array=[], oneImg;
        imgs.forEach(ele => {
            oneImg = {
                fileName:"f"+helper.genRandomstring(8)+"_"+ele.fileName,
                path: ele.path,
                width: ele.width,
                height: ele.height,
                size_kb:Math.ceil(ele.size/1024),
                image_data: ele.image_data,
            };
            img_array.push(oneImg);              
        });
        art_obj.img_array = [...img_array];
        art_obj = JSON.stringify(art_obj);
        //assemble images
        
        let url = `${GLOBAL.BASE_URL}/api/artworks/new`;
        await helper.getAPI(url, _result, "POST", art_obj);  //<<==#1. send artwork and image record to backend server

        //save image to cloud storage
        var storageAccessInfo =  await helper.getStorageAccessInfo(stateVal.storageAccessInfo);
        if (storageAccessInfo && storageAccessInfo !== "upToDate")   
            //update the context value            
            stateVal.updateStorageAccessInfo(storageAccessInfo);
            //
            let bucket_name = "oss-hz-1";  //<<<
            const configuration = {
                maxRetryCount: 3,  
                timeoutIntervalForRequest: 30,
                timeoutIntervalForResource: 24 * 60 * 60
            };
                
            const STSConfig = {
                AccessKeyId:accessInfo.accessKeyId,
                SecretKeyId:accessInfo.accessKeySecret,
                SecurityToken:accessInfo.securityToken
            }
            const endPoint = 'oss-cn-hangzhou.aliyuncs.com';  //<<<
            const last_5_cell_number = _myself.cell.substring(myself.cell.length - 5);
            let filePath, objkey;
            img_array.forEach(item => {
                console.log("init sts");
                AliyunOSS.initWithSecurityToken(STSConfig.SecurityToken,STSConfig.AccessKeyId,STSConfig.SecretKeyId,endPoint,configuration)
                //console.log("before upload", AliyunOSS);
                objkey = `${last_5_cell_number}/${item.fileName}`;  //virtual subdir and file name
                filePath = item.path;
                AliyunOSS.asyncUpload(bucket_name, objkey, filePath).then( (res) => { //<<==#2 send images to cloud storage with callback. But no action required after success.
                    console.log("Success : ", res) //<<==not really necessary to have console output
                }).catch((error)=>{
                    console.log(error)  
                })
            })


    } catch(err) {
        console.log(err);
        return false;
    };
};

const clickSave=async（）=>{
console.log（“保存艺术作品”）；
试一试{
//将图片保存到后端服务器
让art_obj={
_设备id，
名称
描述
标记：（tagSelected.map（（it）=>it.name）），
注：''，
}; 
设img_数组=[]，oneImg；
imgs.forEach（ele=>{
oneImg={
文件名：“f”+helper.genRandomstring（8）+“”+ele.fileName，
路径：ele.path，
宽度：元素宽度，
高度：ele.height，
大小_kb:Math.ceil（ele.size/1024），
图像数据：ele.image\u数据，
};
img_数组推送（oneImg）；
});
art_obj.img_数组=[…img_数组]；
art_obj=JSON.stringify（art_obj）；
//组合图像
让url=`${GLOBAL.BASE_url}/api/artworks/new`；
wait helper.getAPI（url，_result，“POST”，art_obj）//如果您想在后台执行这两项任务，那么就不能使用wait。我发现您在将图像发送到后端时使用的是wait，所以请删除它并使用
.then（）.catch（）；
您不需要删除#2上的回调

如果需要确保#1在执行#2之前完成，则需要移动#2 intp#1的承诺解析代码（在.then（）中）

现在，为了捕获错误。您需要某种类型的错误处理，以提醒用户发生了错误，用户应该触发另一次上载。您可以做的一件事是设置一个红色横幅。我确信有一些软件包可以为您做到这一点。
您可能希望在redux操作中这样做，以便在后台处理它。只需使用c即可uriosity为什么你的后端不执行云任务？
SaachiTech
，我在应用程序中没有使用redux。没有redux还有其他方法吗？关于图像云存储，由于图像文件位于运行应用程序的设备上，我认为应用程序处理保存到云存储的操作会更有效。如果后端服务器处理在保存图像之前，必须先将图像上载到后端服务器，然后服务器才能将其保存到云。后端服务器的负载和流量会很大。在后台处理上载的方法可能有很多。您可以创建一个全局函数或一个具有上载函数的类。Redux很好，因为它可以更新stat因此，该应用程序可以在任何屏幕上向用户显示成功消息。该应用程序使用上下文来保存和共享状态。因为图像上载是一项关键任务，我不确定作为一项完整的后台任务处理是否好。图像上载是一项关键任务，我不确定作为后台任务完全运行是否好。这就是我的原因建议创建一个错误处理，以防出现错误。在后台运行任务与在前台运行任务之间的唯一区别是，用户需要等待任务完成，然后再在UI上执行任何其他操作。
wait
和promission对于同一件事有不同的语法