Javascript Async Await 等待两个函数完成

Question

我很难理解异步/等待。

我有以下代码调用：

• submitHandler() 将表单的输入发布到 Google 表格

                const scriptURL =
                        'GOOGLE SCRIPT URL'
                const form = document.forms.emailform
                fetch(scriptURL, { method: 'POST', body: new FormData(form) })
                        .then(response => {
                                console.log('Success!', response)
                                setFormSuccess(1)
                        })
                        .catch(error => {
                                console.error('Error!', error.message)
                                setFormSuccess(2)
                        })
        } 

• childRef.current.upload() 将文件发布到 S3...

但我需要等待这两个函数的结果，然后再调用另一个函数打开模态并传入这两个函数的结果。

有人可以帮帮我吗？

非常感谢

async function onSubmit() {
                        setTimeout(() => {
                                submitHandler()
                                childRef.current.upload()
                        }, 1000)
                }
                //I want to wait for onSubmit to complete and then call another function which sets state and then launches a modal 
                

编辑：我必须在原始问题中提到，我已经尝试在我调用的所有函数中等待，但它们都不起作用

Answer 1

我认为您只是缺少一些“等待”语句。我也修改了超时时间。

async function onSubmit() {
                    let sleep = function (ms) {
                        return new Promise(resolve => setTimeout(resolve, ms))
                    }
                    await sleep(1000)
                    await submitHandler()
                    await childRef.current.upload()
            }
            //I want to wait for onSubmit to complete and then call another function which sets state and then launches a modal 
            

同样在 submitHandler() 中，您没有正确使用异步等待。您正在使用 .then 方法，该方法无法与 await 轻松结合。

    async submitHandler() {
            const scriptURL = 'GOOGLE SCRIPT URL'
            const form = document.forms.emailform
            try {
                let response = await fetch(scriptURL, { method: 'POST', body: new FormData(form) })
                console.log('Success!', response)
                setFormSuccess(1)
            } catch(error) {
                console.error('Error!', error.message)
                setFormSuccess(2)
            }
    } 

如果您仍想捕获错误，则必须将 fetch 包装在 try 块中。

Answer 2

您可以使用Promise.all() 来等待多个 Promise，就像这样

const result = await Promise.all([submitHandler(), childRef.current.upload()]);

Answer 3

第一件事是如果你想在其中await，你需要将setTimeout的回调标记为async。

但是setTimeout 使用回调，因此偏离了您想要的控制流。因此，我会使用一个简单的 Promise 包装器来实现它：

const promiseSetTimeout = (cb, delay) => new Promise((resolve, reject) => {
  setTimeout(async () => {
    const ret = await cb();
    resolve(ret);
  }, delay);
});

因此您可以等待它并获得所需的控制流。

function onSubmit() {
  return promiseSetTimeout(async () => {
    await submitHandler();
    await childRef.current.upload();
  }, 1000);
}

Answer 4

你的函数应该返回Promise。所以返回你的fetch()

submitHeader(){
      const scriptURL =
                    'GOOGLE SCRIPT URL'
            const form = document.forms.emailform
           return fetch(scriptURL, { method: 'POST', body: new FormData(form) })
                    .then(response => {
                            console.log('Success!', response)
                            setFormSuccess(1)
                            return response;
                    })
                    .catch(error => {
                            console.error('Error!', error.message)
                            setFormSuccess(2)
                    })
    } 

所以在你的 main 函数中你可以

async function onSubmit() {
                    setTimeout(() => {
                            const response = await submitHandler()
                            // Your response will be available here
                            console.log(response);
                            childRef.current.upload()
                    }, 1000)
            }