如何解决JavaScript Promise中JSON字段赋值返回[object Promise]的问题？

看起来你踩了Promise异步处理的典型坑——把Promise实例当成了最终返回值！我来帮你拆解问题，再给你靠谱的解决方案。

为什么会出现[object Promise]？ #

你大概率是把整个fetch().then().then()的Promise链直接赋值给了response变量，而不是在异步回调里拿到实际的title值。举个例子，你可能写了类似这样的错误代码：

// 错误示例：把Promise链赋值给了response
const response = fetch('你的目标URL')
  .then(res => res.json())
  .then(responseData => {
    console.log(responseData.title); // 这里能正常打印，因为回调里已经拿到了解析后的JSON
    return responseData.title;
  });

console.log(response); // 这里会输出[object Promise]，因为response是Promise实例，不是最终的title值

then()方法本身会返回一个新的Promise对象，而不是回调函数里return的那个值——只有当这个Promise状态变为resolved后，你才能通过后续的then()或者await拿到实际的返回值。

正确的处理方式 #

方式1：用async/await（更直观，推荐） #

async/await语法可以把异步代码写得像同步代码一样，彻底避免Promise链的混淆：

async function getTitle() {
  try {
    // 等待fetch请求完成
    const response = await fetch('你的目标URL');
    // 等待JSON解析完成
    const responseData = await response.json();
    
    console.log(responseData.title); // 正常打印标题
    const title = responseData.title; // 这里就是你要的实际标题值
    
    // 在这里做后续处理，或者返回title
    return title;
  } catch (error) {
    // 处理请求或解析过程中的错误
    console.error('请求出错了:', error);
  }
}

// 调用这个异步函数时，也要用await或者then来接收结果
getTitle().then(title => {
  console.log('最终拿到的标题:', title);
  // 在这里用title做你需要的操作
});

方式2：坚持用Promise链（正确处理回调） #

如果不想用async/await，那就要确保在then()的回调内部使用拿到的title值，而不是在外部直接获取：

let title; // 可选：如果需要在外部保存，记得要等异步完成后再访问
fetch('你的目标URL')
  .then(res => res.json())
  .then(responseData => {
    console.log(responseData.title);
    title = responseData.title;
    // 在这里直接处理title，比如传给其他函数
    handleTitle(title);
  })
  .catch(error => console.error('请求失败:', error));

// 专门的处理函数
function handleTitle(titleValue) {
  console.log('处理标题:', titleValue);
  // 这里可以做你原本想用response做的事情
}

关键提醒 #

异步操作不会阻塞代码执行，所以如果你在then()回调之外直接访问title变量，大概率会拿到undefined——因为此时请求还没完成，回调还没执行。一定要在异步回调内部，或者通过await等待Promise完成后，再去使用最终的值。

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