fetch请求中response.json()的作用及调用必要性解析

useEffect(() => {
    fetch(options.url)
      .then((response) => response.json()
      .then((r) => setData(r)));
  }, [options.url]);

response.json() 的作用 #

这是Fetch API为Response响应对象提供的内置异步方法，返回值是Promise。它的核心逻辑分两步：一是完整读取HTTP响应中还未消费的原始响应体流，二是把读取到的文本内容按照JSON语法解析成JavaScript可以直接操作的对象、数组或者基础类型值，你代码里后续拿到的r就是解析完成的结果，可以直接传给setData存入组件状态。

为什么需要调用这个方法 #

这是Fetch API本身的设计逻辑决定的：

• 当请求走到第一个then拿到response对象时，只有响应状态码、响应头这类元信息是可用的，服务端返回的实际业务内容还处于未读取的流状态，根本没法直接访问。
• 不同接口返回的内容格式差异很大，可能是JSON、纯文本、二进制文件、表单数据，Fetch不会自动判断内容格式，因此提供了不同的解析方法：处理JSON用json()、处理纯文本用text()、处理二进制文件用blob()、处理表单格式数据用formData()，需要开发者根据实际返回格式手动选择对应方法完成读取和解析。
• 额外的，json()自带格式校验能力，如果服务端返回的内容不符合JSON语法规范，会直接抛出错误进入Promise的catch分支，避免非法数据流入后续业务逻辑。

不调用该方法能否正常获取接口返回数据 #

拿不到你需要的业务数据。
如果完全不调用任何响应体解析方法，你手里只有一个Response实例，只能访问response.status、response.headers这类和响应体无关的元信息，根本读不到服务端返回的业务字段。
如果接口返回的不是JSON格式内容，比如纯文本、图片流，确实不需要调用json()，换成对应text()、blob()方法就能拿到对应格式的数据，但只要接口返回的是JSON结构，不调用json()就不可能拿到可以直接操作的结构化数据。

顺带提一句，你贴的代码括号位置写得可读性很差，目前的写法虽然能正常运行，但第二个.then是挂载在response.json()返回的Promise上，缩进很容易误导人对逻辑层级的判断，常规规范写法应该把括号闭合在response.json()后面：

fetch(options.url)
  .then((response) => response.json())
  .then((r) => setData(r));

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