You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

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

火山引擎 最新活动