开发者问题收集

Javascript Async Await 等待两个函数完成

2020-11-14
1158
javascript reactjs

我很难理解 async/await。

我有以下代码调用：

  • 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

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

3个回答

我认为您只是缺少一些“await”语句。我还修改了超时。 

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() 中，您没有正确使用 async-await。您正在使用 .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)
            }
    }

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

Kevin Kreps
2020-11-14

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

const result = await Promise.all([submitHandler(), childRef.current.upload()]);
Riwen
2020-11-14

首先，如果您想在 await 内部使用 setTimeout ，则需要将回调标记为 async 。

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

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);
}
Vivick
2020-11-14