如何在改造中获取 JSON 数组响应 - JavaScript

当我们使用 JavaScript 进行网络请求时，服务器通常会返回 JSON 格式的数据。JSON 是一种轻量级的数据交换格式，易于解析和生成，成为现代 Web 应用程序中最常用的数据格式之一。本文主要介绍如何在 JavaScript 中获取 JSON 格式的数组响应。

发送 HTTP 请求

在获取 JSON 数组响应之前，我们需要先发送 HTTP 请求。JavaScript 提供了多种发送 HTTP 请求的方法，其中最常用的是使用 XMLHttpRequest（XHR）对象。

以下示例演示如何使用 XHR 对象发送 GET 请求：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data', true);

xhr.onload = function() {
  if (this.status === 200) {
    // 请求成功
    const response = JSON.parse(this.responseText);
    console.log(response);
  } else {
    // 请求失败
    console.error(this.statusText);
  }
};

xhr.onerror = function() {
  console.error('请求错误');
};

xhr.send();

上述代码中，我们首先创建了一个 XMLHttpRequest 对象，然后指定了请求方式、URL 和是否异步处理请求。接着，我们定义了 onload 和 onerror 事件处理函数，分别在请求成功和失败时触发。最后，我们调用 send 方法发送请求。

解析 JSON 响应

在接收到 JSON 格式的响应后，我们需要将其解析为 JavaScript 对象或数组。JavaScript 提供了 JSON 对象，可以方便地进行 JSON 解析。

以下示例演示如何将 JSON 响应解析为 JavaScript 数组：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data', true);

xhr.onload = function() {
  if (this.status === 200) {
    // 请求成功
    const response = JSON.parse(this.responseText);
    console.log(response);
  } else {
    // 请求失败
    console.error(this.statusText);
  }
};

xhr.onerror = function() {
  console.error('请求错误');
};

xhr.send();

假设服务器返回的 JSON 响应如下：

[
  {
    "name": "张三",
    "age": 20
  },
  {
    "name": "李四",
    "age": 25
  },
  {
    "name": "王五",
    "age": 30
  }
]

则上述代码执行后，控制台输出如下：

[
  {
    "name": "张三",
    "age": 20
  },
  {
    "name": "李四",
    "age": 25
  },
  {
    "name": "王五",
    "age": 30
  }
]

总结

通过以上代码示例，我们可以了解到如何在 JavaScript 中获取 JSON 数组响应。首先，我们需要发送 HTTP 请求，可以使用 XMLHttpRequest 对象；其次，我们需要将接收到的 JSON 响应解析为 JavaScript 对象或数组，可以使用 JSON.parse 方法。在实际开发中，我们还需要注意异步请求的问题，以及错误处理的问题。