如何在useEffect（）React挂钩[duplicate]中使用await关键字

Question

我想在useeffect)中调用几个异步函数，但我不确定如何包含await关键字以等待它们的结果

// somewhere else func1 and func2 are defined
async function func1() {...};
async function func2() {...};


// func1, func2 are imported into file of functional Component
...
useEffect(() => {
    async function foo() {
        func1();
    };
    async function bar() {
        func2();
    }
    if (...) {
        await Promise.all([foo(), bar()]);
        ...
    }
    ...
}, [])
...

这给了我

意外的保留字“await”

如何在useEffect()中await异步函数？

Answer 1

这就该来招数了：

// somewhere else func1 and func2 are defined
async function func1() {...};
async function func2() {...};


// func1, func2 are imported into file of functional Component
...
useEffect(async () => {
    async function foo() {
        await func1();
    };
    async function bar() {
        await func2();
    }
    if (...) {
        await Promise.all([foo(), bar()]);
        ...
    }
    ...
}, [])
...

编辑：您还可以直接使用func1()和func2():

...
useEffect(async () => {
    if (...) {
        await Promise.all([func1(), func2()]);
        ...
    }
    ...
}, [])
...

Answer 2

您可以在useEffect中创建一个匿名函数，并使其异步化，如

useEffect(() => {
    async function foo() {
        func1();
    };
    async function bar() {
        func2();
    }
    (async function() {
       if (...) {
           await Promise.all([foo(), bar()]);
           ...
        }
       ...
    
    })();
    
}, []);

或以更清洁的方式

useEffect(() => {
    async function foo() {
        func1();
    };
    async function bar() {
        func2();
    }
    async function execute() {
       if (...) {
           await Promise.all([foo(), bar()]);
           ...
        }
       ... 
       // any code that you would have normally added 
       // in useEffect callback will now be a part of execute function
    }
    execute();
    
}, [])