ReactJS 中的异步/等待启动

Question

I'm having a problem with using async/await promises and then using those values later on.

The main example that I've seen is:

const myAsyncFunction = async () => {
    const resultA = await promiseA();
    const resultB = await promiseB();

    return functionA() // something that uses both resultA and resultB
}

This was quite helpful to point me in the right direction, but I still cannot get my app to work how I want it. The thing is that I need resultA in promiseB .

I tried to accomplish this by doing some async function inception, like so:

const myAsyncFunction = async () => {
    const resultA = await promiseA();

    return async () => {
        const resultB = await promiseB();

        return functionA() // something that uses both resultA and resultB
    }
}

Alas, this does not seem to work either. functionA is also an async function, but I do not need the value that it returns. When I run this code, it appears that functionA does not run at all.

Hope somebody can help me. Thanks in advance.

doRegisterWithEmailPasswordAndPhoto = async (
        email: string,
        password: string,
        firstname: string,
        lastname: string,
        username: string,
        photo: File | null
    ) => {
        const photoUploadTask: firebase.storage.UploadTask = await this.storage
            .ref()
            .child('profile-pictures/' + username)
            .put(photo ? photo : exampleProfilePic);

        const userCredential = await this.auth.createUserWithEmailAndPassword(
            email,
            password
        );

        const finalDataPush = async (photoUploadTask: Promise<firebase.storage.UploadTask>) => {

            await userCredential.user?.updateProfile({
                displayName: firstname + ' ' + lastname,
                photoURL: (await photoUploadTask).snapshot,
            });

            return this.db.collection('users').doc(userCredential.user.uid).set({
                firstname: firstname,
                lastname: lastname,
                username: username,
                email: email,
                admin: false,
                forumPosts: 0,
                created: this.dbFunc.FieldValue.serverTimestamp(),
                photoURL: photoUploadTask.snapshot.downloadURL,
            });
        };

        return finalDataPush(photoUploadTask);
    };

Answer 1

Promises are a red herring here. If you need a value in a function, then pass it as an argument.

const myAsyncFunction = async () => {
    const resultA = await promiseA();
    const resultB = await promiseB(resultA);

    return functionA(resultA, resultB) // something that uses both resultA and resultB
}

Obviously you need to write your promise-generating functions to expect arguments.

Answer 2

You don't really need that finalDataPush helper function. The following should just work:

async function doRegisterWithEmailPasswordAndPhoto(
    email: string,
    password: string,
    firstname: string,
    lastname: string,
    username: string,
    photo: File | null
) {
    const photoUploadTask: firebase.storage.UploadTask = await this.storage
        .ref()
        .child('profile-pictures/' + username)
        .put(photo ? photo : exampleProfilePic);

    const userCredential = await this.auth.createUserWithEmailAndPassword(
        email,
        password
    );

    await userCredential.user?.updateProfile({
        displayName: firstname + ' ' + lastname,
        photoURL: photoUploadTask.snapshot,
    });

    return this.db.collection('users').doc(userCredential.user.uid).set({
        firstname: firstname,
        lastname: lastname,
        username: username,
        email: email,
        admin: false,
        forumPosts: 0,
        created: this.dbFunc.FieldValue.serverTimestamp(),
        photoURL: photoUploadTask.snapshot.downloadURL,
    });
}