API请求中是否需要调用response.json()，直接解构data是否可行？

核心结论 #

两种写法的适用场景完全不同，并不等价，能不能正常运行完全取决于你用的请求工具：

• 第一种写法是原生Fetch API的用法，但写法本身存在疏漏
• 第二种写法是Axios等封装类请求库的标准用法

具体说明 #

1. 第一种写法的适用场景&问题 #

你看到的response.json()是原生Fetch API的必须操作：
原生fetch执行后返回的Response对象仅包含响应状态、响应头等元信息，没有自动解析响应体内容，必须主动调用json()/text()/blob()等方法才能把响应体序列化为对应格式的数据，且这类方法本身也是异步的，需要加await。

你给出的第一种写法其实存在错误，正确的原生Fetch写法应该是：

export const getTopStories = async () => {
    const response = await fetch(`/home.json?api-key=${api_key}`)
    // 必须加await，否则返回的是Promise而非解析后的JSON数据
    const data = await response.json()
    return data
}

如果你的instance是Axios实例，调用response.json()会直接报错，因为Axios返回的响应对象不存在这个方法。

2. 第二种写法的适用场景 #

第二种写法是Axios这类请求库的标准用法：
Axios内部已经自动完成了响应体的JSON解析操作，会把解析完成的结果挂载到响应对象的data属性上，不需要开发者手动调用解析方法，所以直接解构{ data }就能拿到处理好的结果，写法可以正常运行。

如果你的instance是原生Fetch封装的对象，没有做自动解析响应体、挂载data属性的处理，那么解构出来的data就是undefined，写法无法正常运行。

总结 #

• response.json()是否必要，完全取决于你用的请求工具是否帮你做了自动解析响应体的操作
• 两种写法适用场景完全不同，不存在等价性
• 能不能运行只和你当前项目用的请求工具类型匹配有关

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