Vue：Async Apollo mixin 函数打印一个值，但返回未定义答案

【问题标题】：Vue: Async Apollo mixin function prints a value, but returns undefinedVue：Async Apollo mixin 函数打印一个值，但返回未定义
【发布时间】：2021-05-16 03:46:54
【问题描述】：

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

我已将所有 Apollo 突变从我的主要 Vue 代码中取出到一个全局 mixin 中，以便我可以重用，但是我显然没有让其中一个查询的 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)

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

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

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

感谢您的建议。

【问题讨论】：

标签： javascript vue.js async-await vue-apollo vue-mixin

【解决方案1】：

事实证明，我正在处理嵌套的 Promise。我没有意识到 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,
            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);
    },

【讨论】：