为什么JS fetch与jQuery $.ajax返回的响应结果存在差异？

1. jQuery $.ajax() 的默认行为 #

• jQuery的$.ajax()封装层级更高，会自动检测响应的Content-Type响应头：如果返回类型是application/json，会自动调用JSON解析逻辑，将原始响应体转换为JS对象后，直接传递给success回调的入参。你打印出来的就是已经解析完成的业务数据对象。

2. Fetch API 的默认行为 #

• await fetch()返回的是Response对象，而非直接返回响应体内容。这个对象是整个HTTP响应的封装，包含了响应状态码、响应头、请求地址等所有元信息，你打印出来的type/status/ok等字段都属于这个对象的属性。
• 要拿到实际的JSON业务数据，需要手动调用Response对象的异步解析方法json()，这个方法会读取响应体并完成JSON解析，同样需要用await等待执行完成。

修正后的fetch调用代码 #

async function get_jwt_token(){
    // 第一步：等待请求完成，拿到Response对象
    const response = await fetch('/api/user/token/');
    // 第二步：等待响应体JSON解析完成，拿到业务数据
    const token = await response.json();
    return token;
}

修改后get_jwt_token()返回的结果就和$.ajax()拿到的data完全一致。

补充说明 #

两种API的设计定位不同：$.ajax()偏向开箱即用，默认帮开发者做了大量隐含的自动处理逻辑；而Fetch是浏览器提供的底层原生API，将响应类型判断、解析的控制权完全交给开发者，你也可以根据实际业务场景选择调用.text()/.blob()/.formData()等不同方法解析响应体。

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