axios请求返回undefined求助:fetch.js获数据但Vue组件中无法获取
问题解决:async函数返回undefined的原因与修复
嘿,我一眼就发现问题的症结啦!
问题根源
你的fetch.js里的异步函数存在一个关键问题:虽然在axios.get的.then回调里返回了response,但整个if (type == 'GET')代码块并没有把这个结果返回给外层的async函数。
async函数的规则是:如果没有明确的return语句,它会默认返回一个状态为resolved、值为undefined的Promise。这就导致你在组件里用await getDia()时,拿到的结果自然是undefined。
修复方案
这里给你两种简洁的修复方式,任选其一即可:
方案1:直接return axios请求的Promise
因为axios.get()本身就返回一个Promise,我们可以直接把它return出去,async函数会自动处理它的resolve值:
export default async(url = '', type = 'GET') => { // ...保留你的其他前置代码 if (type == 'GET') { // 直接return这个Promise,让外层拿到resolve后的response return axios.get(url) .then((response) => { console.log(response.data)//get the right value return response }) } // 记得给其他请求类型(比如POST)也加上对应的return逻辑哦 }
方案2:全程使用await语法(更推荐,可读性更强)
既然已经用了async函数,不如统一用await来处理异步,避免.then的嵌套:
export default async(url = '', type = 'GET') => { // ...保留你的其他前置代码 if (type == 'GET') { const response = await axios.get(url); console.log(response.data)//get the right value return response; // 明确return结果,外层await就能拿到它 } // 其他请求类型的处理也要记得return对应的结果 }
额外小提醒
看你在getData.js里的调用:fetch('...', {}),但fetch函数的第二个参数定义的是type(默认值'GET'),这里传了一个对象,可能是笔误?如果你的实际需求是传递axios的配置参数,那需要调整fetch函数的参数定义哦,但这不是当前undefined问题的核心。
内容的提问来源于stack exchange,提问作者suedar




