Vue：异步 Apollo 混合函数打印一个值，但返回未定义

问题描述

异步/返回未定义的查询在这里很常见，但我已经尝试了所有排列的答案，但似乎一无所获......如果我找不到它，我深表歉意。

我已将主 Vue 代码中的所有 Apollo 突变放入全局 mixin 中，以便我可以重用，但是我显然没有为其中一个查询获得正确的异步/承诺语法。

这是混合函数：

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' 值而不用包装在承诺中，并使用

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

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

感谢您的建议。

解决方法

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

所以

     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
          });
    }},

不返回任何内容，因此未定义。

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

因此，调用函数只能使用 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,})
          .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);
    },