React中fetch调用为何需要两个then代码块？

嘿，这个问题问得特别到位——很多刚上手Fetch API的开发者都会有这个疑惑，我来给你拆解清楚其中的逻辑：

第一步：Fetch返回的是「响应对象」，不是直接的数据 #

当你调用fetch(url)时，它返回的是一个Promise，这个Promise成功resolve后，传给第一个then的参数是一个Response对象。这个对象里装的不是后端返回的业务数据，而是请求的元信息：比如HTTP状态码（200/404这些）、响应头、还有一个处于「可读流」状态的响应体（response.body）。你没法直接用这个流来做业务逻辑，必须先把它转换成可读取的格式。

第二步：转换响应体需要另一个Promise #

为了把响应体转换成我们能用的格式（比如JSON、文本、Blob），Fetch给Response对象提供了一系列方法：response.json()、response.text()、response.blob()等等。这些方法的共同点是：它们本身也返回一个新的Promise——因为读取流是异步操作，得等流读取完成、格式转换好之后，才能拿到真正的数据。

所以第一个then的作用就是调用这些转换方法，把新的Promise传递下去，然后第二个then就会接收到转换后的实际数据，这时候你才能用它来渲染页面、做计算之类的操作。

举个直观的例子：

fetch('/api/user')
  .then(response => {
    // 这里的response是Response对象，不是后端返回的用户数据
    if (!response.ok) {
      throw new Error('请求失败');
    }
    // 调用json()返回新的Promise，等待流转换完成
    return response.json();
  })
  .then(userData => {
    // 这里的userData才是后端返回的{ id: 1, name: "张三" }这类数据
    console.log('拿到用户数据:', userData);
    // 在这里做业务逻辑，比如渲染用户信息
  })
  .catch(error => {
    console.error('处理出错:', error);
  });

额外补充：如果后端返回非JSON格式？ #

比如后端返回纯文本，那第一个then就换成response.text()，同样需要第二个then来接收文本内容：

fetch('/api/message')
  .then(response => response.text())
  .then(messageText => {
    console.log('收到消息:', messageText);
  });

简单总结一下：第一个then是处理「响应的元信息+启动响应体转换」，第二个then是接收「转换后的实际业务数据」——这俩步骤都是异步的，所以需要两个then来串联这两个异步操作～

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