如何向 Firebase 'put' 和 'set' 查询操作添加异步功能

Question

我一直在使用以下函数将文件存储在 Firebase 存储中，return URL，然后我将其与其他一些字段一起存储在 Firestore 中。

在哪里添加 'await' 或如何添加承诺，以便在所有操作完成之前不调用 'history.push("/")？目前我认为它在完成之前将我推到下一页。

async function handleSubmit(e) {
    e.preventDefault()
    const collectionRef = useFireStore.collection('users').doc(`${currentUser.uid}`);
    const storageRef = useStorage.ref("avatars")
    const fileRef = storageRef.child(`${uuidv4()}`)

    fileRef.put(file).then(() => {
        fileRef.getDownloadURL().then(function (url) {
            collectionRef.set({
                createdAt: timestamp(),
                email: currentUser.email,
                userid: currentUser.uid,
                username: username,
                firstname: firstname,
                lastname: lastname,
                avatar: url
            })
        });
    })
    history.push("/")
}

请问这里有哪些最佳实践？亲切的问候，马特

Answer 1

你可以这样做，

async function handleSubmit(e) {
    e.preventDefault()
    const collectionRef = useFireStore.collection('users').doc(`${currentUser.uid}`);
    const storageRef = useStorage.ref("avatars")
    const fileRef = storageRef.child(`${uuidv4()}`)

    await fileRef.put(file);
    const url = await fileRef.getDownloadURL();
    await collectionRef.set({
       createdAt: timestamp(),
       email: currentUser.email,
       userid: currentUser.uid,
       username: username,
       firstname: firstname,
       lastname: lastname,
       avatar: url
    });
    history.push("/")
}

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

如何向 Firebase 'put' 和 'set' 查询操作添加异步功能

How to add async functionality to a Firebase 'put' and 'set' query operation

reactjs

firebase-storage

google-cloud-firestore