如何在客户端接收 JSON 数据？

JSON（JavaScript Object Notation）是一种常用的轻量级数据交换格式，常见于前后端数据传输时。本文将介绍如何在客户端接收 JSON 数据。

XMLHttpRequest

XMLHttpRequest 是一个在客户端发送 HTTP 请求和接收 HTTP 响应的 API。可以利用它来接收服务器返回的 JSON 数据。以下是一个简单的例子：

let request = new XMLHttpRequest();
request.open('GET', '/data.json', true);

request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
        let data = JSON.parse(request.responseText);
        // 处理返回的 JSON 数据
    }
};

request.onerror = function() {
    // 处理错误
};

request.send();

上述代码使用 XMLHttpRequest 发送一个 GET 请求，请求的 URL 是 '/data.json'。当服务器返回响应时，调用 onload 函数，将返回的 JSON 数据解析为 JavaScript 对象 data。接下来便可以对返回的数据进行处理。

需要注意的是，需要对返回的 JSON 数据进行错误处理，当请求失败时调用 onerror 函数。

fetch

fetch API 是一种新的浏览器内置的 API，用于替代 XMLHttpRequest。相较于 XMLHttpRequest，fetch 更加简洁、易用。以下是一个 fetch 的例子：

fetch('/data.json')
    .then(response => response.json())
    .then(data => {
        // 处理返回的 JSON 数据
    })
    .catch(error => {
        // 处理错误
    });

上述代码使用 fetch 发送一个 GET 请求，请求的 URL 是 '/data.json'。当服务器返回响应时，将返回的 JSON 数据使用 response.json() 方法解析为 JavaScript 对象。接下来便可以对返回的数据进行处理。

和 XMLHttpRequest 类似，fetch 也需要对返回的 JSON 数据进行错误处理，当请求失败时调用 catch 函数。

axios

axios 是一个流行的基于 Promise 的 HTTP 库，可以用于浏览器和 Node.js。可以利用它来接收服务器返回的 JSON 数据。以下是一个 axios 的例子：

axios.get('/data.json')
    .then(response => {
        let data = response.data;
        // 处理返回的 JSON 数据
    })
    .catch(error => {
        // 处理错误
    });

上述代码使用 axios 发送一个 GET 请求，请求的 URL 是 '/data.json'。当服务器返回响应时，将返回的 JSON 数据存储在 response.data 属性中。接下来便可以对返回的数据进行处理。

和 XMLHttpRequest、fetch 类似，axios 也需要对返回的 JSON 数据进行错误处理，当请求失败时调用 catch 函数。

总结

以上是在客户端接收 JSON 数据的三种方式，分别是使用 XMLHttpRequest、fetch 和 axios。无论使用哪种方式，都需要对返回的 JSON 数据进行错误处理，避免对应用造成不良影响。