Vue:Async Apollo mixin 函数打印一个值,但 returns 未定义
Vue: Async Apollo mixin function prints a value, but returns undefined
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
我错过了什么?为什么值没有传给观察者?
感谢您的任何建议。
原来我在处理嵌套的承诺。我没有意识到的是,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);
},
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
我错过了什么?为什么值没有传给观察者?
感谢您的任何建议。
原来我在处理嵌套的承诺。我没有意识到的是,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);
},