为何Fetch解析JSON时需要额外的then方法？

这个问题问得太戳中新手痛点了！我刚学fetch的时候也纠结过好久，现在给你把底层逻辑讲明白~

先搞懂两个核心点： #

1. fetch的返回值不是JSON数据
   当你调用fetch(url)时，它返回的第一个Promise resolve后得到的是一个Response对象——这个对象里装的是HTTP响应的元信息（比如状态码、请求头），还有未解析的响应体数据流，不是你直接能用的JSON内容。

2. data.json()是异步操作
   你以为data.json()是同步把数据转成JSON？错啦！它其实是启动了一个异步任务：把响应体的数据流全部读取出来，再解析成JSON格式。所以这个方法返回的不是JSON对象，而是一个新的Promise，只有等这个Promise resolve后，你才能拿到真正的JSON数据。

为什么不能直接在一个then里处理？ #

如果你写：

fetch(url)
  .then(function(data) {
    var obj = data.json();
    // 这里处理逻辑
    console.log(obj); // 你会看到 Promise {<pending>}，不是你要的JSON！
  })

此时obj是一个未完成的Promise，不是解析好的数据，你直接操作它根本拿不到内容，比如访问obj.username会得到undefined——因为解析JSON的异步任务还没跑完呢。

那第二个then的作用是什么？ #

第一个then里调用resp.json()，拿到的是它返回的Promise，然后第二个then就是用来等待这个Promise完成，拿到最终解析好的JSON对象：

fetch(url)
  .then((resp) => resp.json()) // 这里返回解析JSON的Promise
  .then(function(obj) {
    // 这里的obj才是真正的JSON数据，放心用！
  })

有没有替代写法？ #

其实也不是必须写两个then，用ES6的async/await语法可以更直观地表达：

async function getJsonData() {
  const resp = await fetch(url); // 等待fetch拿到Response
  const obj = await resp.json(); // 等待Response解析成JSON
  // 处理逻辑
}

这里的两个await本质上和两个then是一样的，都是等待两个异步步骤完成。

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