第二个函数不会等待 JS 中的第一个函数完成

Question

我正在使用名为 OWL 的 JS 框架，我有库，当您单击按钮时，它会调用函数，在数据库中上传文件，然后更新 useState 以重新渲染模板。

我的主要功能是在单击按钮后调用

    async addNewData(e) {
        var file = document.getElementById('inputGroupFile01')
        var description = document.getElementById('name')

        await this.createNewData(file, description)
        await this.getAllData()
    }

它似乎调用了两个函数，第一个是上传，第二个是再次获取所有数据

    createNewData(file, description) {
        this.fileUploadService.upload(
            "/upload_file", file.files,
            {
                buildFormData: (formData) => {
                    formData.append("res_model", 'library.data');
                    formData.append("library_id", this.props.library_id);
                    formData.append("description", description.value);
                },
            },
            console.log("Upload")
        );
        file.value = ""
        description.value = ""
    }

和

    async getAllData() {
        const domain = [["library_id", "=", this.props.library_id]];
        const modelId = await this.orm.searchRead("library.data", domain);

        modelId.forEach(record => {
            record.create_uid[1] = record.create_uid[1].split("-")[0].trim();
            record.create_date = record.create_date.split(" ")[0]
        });
        this.state.data = modelId
        console.log("Fetch")
    }

问题是我想createNewData完成重新渲染模板并获取新数据，但似乎首先调用getAllData，然后调用createNewData。 在此图中，它调用 search_read，然后调用 upload_file。 我是 JS 的新手，我发现 async/await 应该对我有帮助，但做不到。 谢谢！

Answer 1

这个：

await this.createNewData(file, description)

实际上不会“等待”任何东西，因为

createNewData

不会返回

Promise

。但是，根据对上述问题的评论，您指出

this.fileUploadService.upload

is

async

这意味着 it 确实返回

Promise

。

如果您将

createNewData

设为

async

函数，那么它可以：

• await

  upload

  功能
• 返回

  Promise

这将使您的整体“等待”操作发挥作用。例如：

async createNewData(file, description) {
    await this.fileUploadService.upload(
        "/upload_file", file.files,
        {
            buildFormData: (formData) => {
                formData.append("res_model", 'library.data');
                formData.append("library_id", this.props.library_id);
                formData.append("description", description.value);
            },
        },
        console.log("Upload")
    );
    file.value = ""
    description.value = ""
}

基本上，

await

不是一个包罗万象的“让代码等待某些东西”关键字。它专门“等待”一个

Promise

对象。正在等待的函数需要返回

Promise

或为

async

（这意味着它会自动返回

Promise

）。

（技术上，具体而言，它不必是

Promise

，它可以是任何可等待。但是一般来说，至少对于您自己的学习而言，您可能最好不要担心目前的具体细节，仅关注标准

Promise

对象和 async/await 语法。）

---

一些注意事项...

1. 这并不能保证

   this.fileUploadService.upload

   本身的正确实现。这有点超出了所问问题的范围。代码中完全有可能存在问题中未涵盖的许多问题。
2. 那个

   console.log("Upload")

   的说法在哪里毫无意义。它立即记录到控制台，然后将其返回值

   undefined

   传递给

   upload

   函数。如果目标是立即登录到控制台，请在函数的第一行执行此操作。如果目标是在

   upload

   函数之后登录到控制台，请在 after 函数（等待之后）执行此操作。