为何JavaScript fetch的.then()未返回预期值？两种写法差异解析

这两种写法的核心差异在于对fetch返回值和Response.json()方法的理解偏差：

1. fetch的返回值本质
   fetch调用后返回的是一个Promise<Response>，也就是说第一个.then()回调里接收的参数是Response响应对象，不是直接的接口返回数据。你第二种写法里把这个参数命名为repos完全是误解了它的类型。

2. Response.json()的异步特性
   Response.json()方法的作用是异步读取并解析响应体为JSON格式，它本身返回的是一个Promise，而不是同步返回解析后的JSON数据：

• 第一种写法里，通过链式调用.then()，等待res.json()的Promise完成，拿到实际解析后的仓库数组，再调用setState，这时候状态里存的是有效数据。
• 第二种写法里，直接把repos.json()返回的Promise赋值给r，然后传给setState，这时候组件状态里存的是一个Promise对象，不是实际的仓库数据，自然无法正常渲染或使用。

如果要修正第二种写法，需要等待json()的Promise完成，比如改成：

fetch("https://api.github.com/users/vampaynani/repos").then((res) => {
  res.json().then((repos) => {
    this.setState({ repos });
  });
});

不过这种嵌套写法不如第一种链式调用清晰。

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