Vue.js无法从POST请求获取正确返回值问题求助

问题原因 #

你当前的前端代码仅打印了Fetch API返回的Response对象本身，并未读取并解析响应体中的JSON数据。Response对象的body是一个ReadableStream，必须通过.json()这类方法才能获取到实际的返回内容。

修复后的前端服务函数 #

function addNewSample(sample){
    const requestOptions = {
        method: 'POST',
        headers:{ 
            ...authHeader(),
            "content-type": "application/json",
        },
        body: JSON.stringify(sample)
    };
    // 先解析响应体的JSON数据，再处理返回结果
    return fetch(`${config.apiUrl}/samples/newAdd`, requestOptions)
        .then((response) => {
            // 先校验响应状态是否正常
            if (!response.ok) {
                throw new Error('请求响应异常');
            }
            return response.json(); // 解析JSON格式的响应体内容
        })
        .then((data) => {
            console.log(data); // 此处即可拿到完整的返回数据
            return data; // 返回数据供后续业务逻辑使用
        })
        .catch((error) => {
            console.error('请求出错:', error);
            throw error;
        });
}

补充说明 #

1. 后端代码无问题：已通过res.json(sample)正确返回保存后的文档，且后端控制台能打印完整数据，说明后端逻辑正常。
2. Fetch API机制：调用fetch()返回的Promise会解析为Response对象，该对象仅包含响应元数据（状态码、请求头等），实际响应内容需要主动调用方法读取。.json()方法会读取ReadableStream并解析为JSON对象，返回一个新的Promise。

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