JavaScript中POST请求返回Promise对象无法获取实际数据的问题

你遇到的问题根源在于**response.json()返回的是一个Promise对象**，而非直接的JSON数据。你将这个Promise赋值给变量obj后直接使用，自然只能拿到Promise本身，而不是解析后的实际数据。控制台里展开Promise看到的PromiseResult是浏览器对Promise的异步解析结果，但代码里没有等待这个Promise完成就使用了变量。

方案1：链式then传递解析结果 #

修正后的代码会在第一个then中返回response.json()的Promise，让后续then接收解析完成的数据：

function login() {
    const outputElement = document.getElementById('output');

    return fetch('http://localhost:3000/api-keys', {
        method: 'POST',
        headers: {
            'Authorization': 'Basic ' + btoa('john@gmail.com:123456'),
            'content-type': 'application/json'
        }
    })
    .then(response => response.json()) // 返回Promise，传递解析后的数据
    .then(data => {
        // data就是你需要的实际JSON数据
        outputElement.textContent = JSON.stringify(data); // 转成字符串展示
        console.log(data); // 控制台打印实际数据
        // 可以直接存储data到变量或使用
    })
    .catch(error => {
        console.error('请求失败:', error); // 处理错误
    });
}

方案2：使用async/await简化异步代码 #

async/await能让异步代码更接近同步写法，更易读：

async function login() {
    const outputElement = document.getElementById('output');

    try {
        const response = await fetch('http://localhost:3000/api-keys', {
            method: 'POST',
            headers: {
                'Authorization': 'Basic ' + btoa('john@gmail.com:123456'),
                'content-type': 'application/json'
            }
        });
        const data = await response.json(); // 等待Promise解析完成
        outputElement.textContent = JSON.stringify(data);
        console.log(data);
    } catch (error) {
        console.error('请求失败:', error);
    }
}

关键注意点 #

• 不要直接使用response.json()返回的Promise：必须等待它解析完成，要么通过链式then传递，要么用await等待。
• 展示对象需转字符串：直接将对象赋值给textContent会显示[object Object]，用JSON.stringify(data)可以把对象转成可读的字符串。
• 必须处理错误：添加catch块（链式写法）或try/catch（async/await写法），避免请求失败时无任何提示。

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