如何console.log输出Promise返回结果而非Promise对象本身

问题原因 #

fetch 返回的 Response 对象的 json() 方法本身是异步方法，会返回一个Promise对象，你没有等待这个Promise执行完成就直接打印，所以输出的是Promise实例而不是解析后的接口数据。另外你的代码里else分支的err变量没有定义，运行时会抛出引用错误。

修复后的代码 #

const onPageLoad = async () => {
    try {
        const response = await fetch(`/api/project/projects`, {
            method: 'GET',
            headers: { 'Content-Type': 'application/json' },
        })
        
        if (response.ok) {
            // 增加await等待JSON解析完成，拿到最终接口返回数据
            const result = await response.json()
            console.log(result)
        } else {
            console.error('接口请求失败，状态码：', response.status)
        }
    } catch (err) {
        // 统一捕获网络异常、JSON解析失败等错误
        console.error('请求出错：', err)
    }
}

onPageLoad();

额外注意事项 #

• 所有异步方法都需要通过await或者.then()才能拿到最终执行结果，直接调用异步方法拿到的永远是Promise对象
• 建议所有async函数内部都用try catch包裹异步逻辑，避免未捕获的运行时错误导致代码中断

内容的提问来源于stack exchange，提问作者optionalfigure