Vue：Async Apollo mixin function 打印一个值，但返回 undefined

Question

异步/返回未定义的查询在这里很常见，但我已经尝试了所有答案的排列，但似乎无处可寻……如果我找不到它，请道歉。

我已将所有 Apollo 突变从我的主要 Vue 代码中取出到一个全局 mixin 中，以便我可以重用，但是我显然没有让其中一个查询的 async/promise 语法正确。

这是混合 function：

async DBgetGroupName(id) {
      if (id == null) {
        return process.env.VUE_APP_DEFAULT_GROUP_NAME;
      } else {
        await this.$apollo
          .query({
            query: GET_GROUP,
            variables: {
              id: id,
            },
          })
          .then((data) => {
            let ret = data.data.groups[0].group_name;
            return new Promise((resolve, reject) => {
              if (ret !== undefined) {
                console.log("Return value is " + ret);
                resolve(ret);
              } else {
                reject("Error");
              }
            });

      })
    }}

这是呼叫观察者。

watch: {
     selected: async function() {
      let vars = {
        id: null,
        name: "",
      };

      vars.id = this.selected;
       this.DBgetGroupName(vars.id).then((data) => {
        console.log("Name is " + data);
      });
    },
  }

我尝试过的其他排列只是简单地返回“ret”值而不用 promise 包装，并使用

let data = await this.DBgetGroupName(vars.id)

在观察者而不是 then 块中。 控制台中的结果总是

Return value is Test Group [or whichever group I've selected, ie the correct value]
Name is undefined

我错过了什么？ 为什么值没有传递给观察者？

谢谢你的任何建议。

Answer 1

事实证明，我正在处理嵌套的 Promise。 我没有意识到 Apollo 查询本身是一个 promise，并且该块中返回的任何内容实际上都返回到该 promise，而不是任何调用 function。

所以

     async DBgetGroupName(id) {
      if (id == null) {
        return process.env.VUE_APP_DEFAULT_GROUP_NAME;
      } else {
        await this.$apollo. // this call returns a promise
          .query({
            query: GET_GROUP,
            variables: {
              id: id,
            },
          })
          .then((data) => {
            let ret = data.data.groups[0].group_name;
            console.log("Return value is "+ret)
            return ret // this returns to the above promise, not the overall function
          });
    }},

不返回任何东西，因此未定义。

因此，为了让它工作，我只需要返回初始的 promise，然后在解决时返回最终的返回值。

因此，调用 function 可以只使用 await，而不是 then 块。

最终，正确的代码：

     async DBgetGroupName(id) {
      if (id == null) {
        return process.env.VUE_APP_DEFAULT_GROUP_NAME;
      } else {
        return await this.$apollo  //return this promise
          .query({
            query: GET_GROUP,
            variables: {
              id: id,
            },
          })
          .then((data) => {
            let ret = data.data.groups[0].group_name;
            console.log("Return value is "+ret)
            return ret. //value provided to above promise for returning
          });
    }},

并调用观察者：

     selected: async function() {
      let vars = {
        id: null,
        name: "",
      };
      vars.id = this.selected;
      let data = await this.DBgetGroupName(vars.id)
      console.log("Name is " + data);
    },