为何jQuery调用API返回结果被包裹为数组？直接访问则正常？

直接在浏览器地址栏或Postman访问API https://example.com/api/elements/1 时，响应的JSON内容为：

{ "id": 1, "name": "foobar" }

但使用jQuery的$.get方法（代码如下）或原生XMLHttpRequest调用时，控制台输出的却是包含该对象的数组：

$.get('https://example.com/api/elements/1', data => { console.log(data) })

输出结果：

[ { "id": 1, "name": "foobar" } ]

请问为何存在此差异？如何直接获取JSON对象而非包含它的数组？

这种差异大概率是API根据请求的Accept请求头字段返回了不同格式的内容：

• 浏览器地址栏或Postman发起请求时，Accept字段通常包含application/json或text/html，API识别到这类请求后，返回单个JSON对象。
• 而jQuery的$.get、原生XHR默认发送的Accept字段更宽泛（比如包含*/*），API可能将这类请求判定为批量查询场景，返回了包裹对象的数组结构。
  另外也不排除API存在用户代理（UA）判断逻辑，针对浏览器和脚本类请求返回不同的响应结构。

方法一：指定请求头为application/json #

用jQuery的$.ajax代替$.get，手动设置Accept请求头，明确告诉API需要单个JSON对象：

$.ajax({
  url: 'https://example.com/api/elements/1',
  headers: { 'Accept': 'application/json' },
  success: data => { console.log(data) }
})

原生XMLHttpRequest的写法：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/elements/1');
xhr.setRequestHeader('Accept', 'application/json');
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

方法二：直接提取数组第一个元素 #

如果无论如何设置请求头，API都固定返回数组结构，可直接取数组索引为0的元素：

$.get('https://example.com/api/elements/1', data => {
  const targetObj = data[0];
  console.log(targetObj);
})

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