ReactJS中如何让console.log仅输出fetch返回的[[PromiseResult]]文本值

问题原因 #

response.json() 本身是异步方法，返回值是一个 Promise 实例，你直接打印这个 Promise 对象只能看到内部属性 [[PromiseResult]]，无法直接获取到它的最终解析值。

解决方法 #

方法1：链式 .then 调用 #

在 response.json() 后追加一个 .then 回调，待 Promise 状态兑现后拿到返回值再打印：

fetch('/upload', {
    method: 'POST',
    body: data
}).then(response => {
    return response.json()
}).then(result => {
    // 此处 result 就是你要的 [[PromiseResult]] 对应的值
    console.log(result)
})

方法2：使用 async/await 语法（更简洁） #

将外层逻辑封装为 async 函数，用 await 等待 Promise 执行完成后再打印：

const upload = async () => {
  const response = await fetch('/upload', {
    method: 'POST',
    body: data
  })
  const result = await response.json()
  console.log(result)
}
// 调用函数执行
upload()

如果你的接口返回的是纯文本内容而非 JSON 格式，把上述代码里的 response.json() 替换为 response.text() 即可直接拿到文本值。

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