Vue：Async Apollo mixin 函数打印一个值，但 returns 未定义

Question

Async/return 未定义的查询在这里很常见，但我已经尝试了所有答案排列，但似乎无处可去...如果我找不到它，我深表歉意。

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

这是混合函数：

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)

在 watcher 而不是 then 块中。控制台中的结果总是

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

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

感谢您的任何建议。

Answer 1

原来我在处理嵌套的承诺。我没有意识到的是，Apollo 查询本身就是一个承诺，在那个块中 returned 的任何东西实际上都是 return 到那个承诺，而不是任何调用函数。

所以

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

没有 return 任何东西，因此未定义。

因此，为了让它工作，我只需要 return 最初的承诺，然后 return 最终 return 解决后的价值。

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

Vue：Async Apollo mixin 函数打印一个值，但 returns 未定义

Vue: Async Apollo mixin function prints a value, but returns undefined

javascript

vue.js

async-await

vue-apollo

vue-mixin