为什么fetch仅调用一次then无法正常获取并渲染JSON数据？

核心原理：fetch() 请求成功后，then 回调接收的第一个参数是 Response 类型对象，该对象的 json() 方法属于异步方法，仅会返回一个 Promise 实例，不会直接返回解析完成的 JSON 数据，必须等待该 Promise 状态变为 fulfilled 后才能拿到实际的 JSON 内容。

正确写法（原注释内容） #

fetch("test").then(data=>data.json()).then(res=>{postFetch(res)});

执行逻辑：

• 第一个 then 拿到 Response 对象后调用其 json() 方法，返回用于解析 JSON 内容的 Promise
• 第二个 then 等待上述 Promise 执行完成，拿到解析后的实际 JSON 对象 {"name":"Carla"} 作为入参传入 postFetch 方法，此时访问参数的 name 属性可以正常拿到 Carla 内容。

错误写法（当前生效代码） #

fetch("test").then(data => postFetch(data.json()))

执行逻辑：

• 第一个 then 拿到 Response 对象后，直接将 data.json() 返回的 Promise 实例作为参数传给 postFetch
• postFetch 接收的参数是 Promise 实例而非解析后的 JSON 对象，Promise 实例本身不存在 name 属性，因此 data.name 取值为 undefined，页面最终显示 undefined。

内容的提问来源于stack exchange，提问作者Carla only proves trivial prop